admin 管理员组

文章数量: 1184232


2024年2月24日发(作者：grep完整匹配)

html+css 实现图片右上角加删除叉、图片删除按钮

这篇文章主要介绍了html+css 实现图片右上角加删除叉、图片删除按钮,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

为了纪录下，以后可能用到，有需要的道友也可以用用。

不BB，上效果图先

以上就是效果图。 右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白

1 

DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtm3 
"> 
4 
 
5 
 
6 
7 
/> 
8 
无标题文档 
9 
1 
1 
7 
18 
19 
20 
21 
22 
23 
24 
25 
26 
27 
28 
29 
30 
31 
32 
33 
34 
35 
36 
37 
38 
3   
 
    
 
          
        
 
             
            
 
                 
            
 
            
 
                 
            
 
        
 
          
    
 
 
 
 
 
搞定。收工了。复制代码，替换下图片素材就直接能用了 
下班。走人 
------------------------------------------------------------------------------------------- 华丽分割 --------------------------------------------------------------------------------------------------------- 
补充。由于拿left都是0 
换种方式获取 
1 
2 
3 
4 
5 
6 
var objUrl = getObjectURL([0]); 
       var left = $('#file_img').offset().left; 
       var top = $('#file_img').offset().top; 
         
       // left为默认图的最左侧距离， 添加后的图片可根据 默认图的宽度 - 删除层图片的宽度(即：当前我默认图的宽度为75，删除层的图片宽度为16, left = 75 - 16, 位置就能到图片的最右侧了！ top也是同样道理) 
       $('#img_zindex_div_1').css({position: "absolute", left: left 
+ 59, top: top - 5, display: "block" }); 
总结 
 
到此这篇关于html+css 实现图片右上角加删除叉、图片删除按钮的文章就介绍到这了

本文标签： 图片 删除 需要 代码 参考

版权声明：本文标题：html+css 实现图片右上角加删除叉、图片删除按钮 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1708726653a529896.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。