图片蒙版

最新推荐文章于 2024-08-09 06:13:01 发布

collinye

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量364

点赞数

文章标签： function xhtml div border table html

本文链接：https://blog.csdn.net/collinye/article/details/2569120

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

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

</head>

<script language="javascript">

	var TX$ = function(){return document.getElementById(arguments[0]) || false;}

	var TXmask = "TX_new_Mask";

	var TXdivID = "TX_new_Div";

	// 新图层

	function TXdiv(TXImg) {

		if (TX$(TXdivID)) document.removeChild(TX$(TXdivID));

		if (TX$(TXmask)) document.removeChild(TX$(TXmask));

	// 激活图层

	var TXnewDiv = document.createElement("div");

		TXnewDiv.id = TXdivID;

		TXnewDiv.style.position = "absolute";

		TXnewDiv.style.zIndex = "9999";

		TXnewDiv.style.textAlign = "center";

		TXnewDiv.style.width = "100%";

		TXnewDiv.style.height = "100%";

		TXnewDiv.style.top = (0+parseInt(document.documentElement.scrollTop))+"px";

		TXnewDiv.style.left = 0;

		var TXHtmlCode="";	

		TXHtmlCode = TXHtmlCode + "<table width='100%' height='"+document.documentElement.offsetHeight

		TXHtmlCode = TXHtmlCode + "' border='0' cellpadding='0' cellspacing='0'><tr><td align='center' valign='middle'>";

		TXHtmlCode = TXHtmlCode + "<div style='margin-bottom:5px;border:2px solid #000;_width:1px;min-width:1px'><img src='";

		TXHtmlCode = TXHtmlCode + TXImg;

		TXHtmlCode = TXHtmlCode + "' style='background-color:#fff;border:3px solid #FFF;' οnclick='TXHideDiv()'></div>";

		TXHtmlCode = TXHtmlCode + "</td></tr></table>"

		alert(document.documentElement.offsetHeight);

		TXnewDiv.innerHTML = TXHtmlCode ;

		document.body.appendChild(TXnewDiv);

	// 背景图层

	var TXnewMask = document.createElement("div");

		TXnewMask.id = TXmask;

		TXnewMask.style.position = "absolute";

		TXnewMask.style.zIndex = "1";

		TXnewMask.style.width = document.body.scrollWidth + "px";

		TXnewMask.style.height = document.body.scrollHeight + "px";

		alert("document.body.scrollWidth:"+document.body.scrollWidth);

		alert("document.body.scrollHeight:"+document.body.scrollHeight);

		TXnewMask.style.top = "0px";

		TXnewMask.style.left = "0px";

		TXnewMask.style.background = "#000";

		TXnewMask.style.filter = "alpha(opacity=60)";

		TXnewMask.style.opacity = "0.40";

		document.body.appendChild(TXnewMask); 

	}

function TXHideDiv() {

	document.body.removeChild(TX$(TXdivID));

	document.body.removeChild(TX$(TXmask));

}

</script>

<body style="margin:0">



<br />

<br />

<img src="http://bbs.51js.com/images/default/logo.gif" onClick="TXdiv(this.src);"><br /><br />

在图片标签内，添加onclick事件，红色部分<br>

<img src="bg.jpg"<span style="color:#F00"> onClick="TXdiv(this.src);"</span>><br>



<img src="http://bbs.51js.com/images/default/logo.gif" onClick="TXdiv(this.src);"><br />



<img src="http://bbs.51js.com/images/default/logo.gif" onClick="TXdiv(this.src);"><br />



<br>-

<img src="http://bbs.51js.com/images/default/logo.gif" onClick="TXdiv(this.src);"><br />

<br>-

<br>-

<br>-

<br>-

<br>-

<br>-

<br>-

</body>

</html>

collinye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片蒙版

无标题文档 var TX$ = function(){return document.getElementById(arguments[0]) || false;} var TXmask = "TX_new_Mask"; var TXdivID = "TX_new_Div"; // 新图层 function T
复制链接

扫一扫