css如何实现网页图片加删除叉、图片删除按钮

最新推荐文章于 2024-06-24 10:30:37 发布

云南仟龙Mark

最新推荐文章于 2024-06-24 10:30:37 发布

阅读量1.6k

点赞数

文章标签： css javascript html

原文链接：https://blog.51cto.com/u_15111999/4118559

版权

今天分享下” css如何实现网页图片加删除叉、图片删除按钮“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。为了记录下，以后可能用到，有需要的编友也可以用用。

不多说，上效果图先

在这里插入图片描述

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

</pre><pre name="code" class="html">

<head>

<title>无标题文档</title>

.divX

{

z-index:200;

-moz-border-radius:20px;

-webkit-border-radius:20px;

line-height:10px;

text-align:center;

font-weight:bold;

cursor:pointer;

font-size:10px;

display: none;

}

</style>

</head>

<body>

</div>

</div>

</form>

</body>

function addFile(ths) {

var objUrl = getObjectURL(ths.files[0]);

var left = $(’#file_img’).position().left;

var top = $(’#file_img’).position(http://www.qlyl1688.com/).top;

$(’#img_zindex_div_1’).css({position: “absolute”, left: left + 75, top: top + 10, display: “block” });

$(’#file_img’).attr(“src”, objUrl);

}

function del() {

alert(“删除”);

}

function getObjectURL(file) {

var url = null ;

if (window.createObjectURL!=undefined) { // basic

url = window.createObjectURL(file) ;

} else if (window.URL!=undefined) { // mozilla(firefox)

url = window.URL.createObjectURL(file) ;

} else if (window.webkitURL!=undefined) { // webkit or chrome

url = window.webkitURL.createObjectURL(file) ;

}

return url ;

}

</script>

</html>

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

下班。走人

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

补充。由于拿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" });

总结

今天的文章就分享到这啦，内容转自脚本之家，下篇文章再见！

云南仟龙Mark

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css如何实现网页图片加删除叉、图片删除按钮

今天分享下” css如何实现网页图片加删除叉、图片删除按钮“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。为了记录下，以后可能用到，有需要的编友也可以用用。不多说，上效果图先以上就是效果图。右上角的图片可自己换图片，图片素材我就不放上来了，我就上个代码，挺简单的css和js，初学者应该也看得明白</pre><pre name="code
复制链接

扫一扫