您现在的位置是:网站首页> 编程资料编程资料

html+css 实现图片右上角加删除叉、图片删除按钮html+css制作div标签增加右上角删除图标的示例代码

2023-10-09 293人已围观

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

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

不BB,上效果图先



 

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

无标题文档

搞定。收工了。复制代码,替换下图片素材就直接能用了

下班。走人

------------------------------------------------------------------------------------------- 华丽分割 ---------------------------------------------------------------------------------------------------------

补充。由于拿left都是0

换种方式获取

 var objUrl = getObjectURL(ths.files[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图片右上角加上删除内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!

相关内容

-六神源码网