html怎么给图片加个叉,html+css 图片右上角加删除叉，图片删除

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

无标题文档

.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;

}

function addFile(ths) {

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

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

var top = $('#file_img').position().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 ;

}

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

下班。走人

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

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