html图片替换按钮-HTML+css实现图片右上角添加删除十字和图片删除按钮

为了记录，以后可能会用到，有需要的捐献者也可以使用。

没有BB，请先看治疗图

以上是功效图，右上角的图可以自行更改。 图片素材我就不贴了。 我只会发布代码。 这是非常简单的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 ;
	}

完毕。 到此为止html图片替换按钮html图片替换按钮，复制代码，替换图片素材，直接运行

工作.休假

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

补充。 因为向左取总是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图片右上角添加删除内容的信息，请搜索Script House之前的文章或者继续浏览下面的相关文章，希望大家以后多多支持Script House！