javascriptImgBox透明遮罩层背景图片展示_javascript技巧

来源：懂视网责编：小采时间：2020-11-27 20:43:38

javascriptImgBox透明遮罩层背景图片展示_javascript技巧

javascriptImgBox透明遮罩层背景图片展示_javascript技巧: JavaScript Data Access Test function topDiv(el){ var elem=document.createElement(div); elem.className=top-div; //=========create img tag var img=document.createElement(img); img.src=el.href; elem.appendChild(img); //=========creat

推荐度：

点击下载本文 文档为doc格式

导读javascriptImgBox透明遮罩层背景图片展示_javascript技巧: JavaScript Data Access Test function topDiv(el){ var elem=document.createElement(div); elem.className=top-div; //=========create img tag var img=document.createElement(img); img.src=el.href; elem.appendChild(img); //=========creat

<html> 
<head> 
<title>JavaScript Data Access Test</title> 
<script type="text/javascript"> 
function topDiv(el){ 
var elem=document.createElement("div"); 
elem.className="top-div"; 
//=========create img tag 
var img=document.createElement("img"); 
img.src=el.href; 
elem.appendChild(img); 
//=========create close DIV 
var closeDiv=document.createElement("div"); 
closeDiv.innerHTML="Close"; 
closeDiv.onclick=function(){ 
document.body.removeChild(elem); 
document.body.removeChild(alpha); 
} 
closeDiv.style.position="absolute"; 
closeDiv.style.right="2px"; 
closeDiv.style.top="2px"; 
closeDiv.style.fontSize="12px"; 
closeDiv.style.color="red"; 
closeDiv.style.border="1px solid #333"; 
closeDiv.style.backgroundColor="#eee"; 
closeDiv.style.cursor="hand"; 
elem.appendChild(closeDiv); 
//=========append the top DIV to body 
document.body.appendChild(elem); 
var alpha = alphaDiv(elem); 
}

function alphaDiv(el){ 
var elem=document.createElement("div"); 
elem.className="alphaDiv"; 
elem.onclick=function(e){ 
document.body.removeChild(elem); 
document.body.removeChild(el); 
} 
document.body.appendChild(elem); 
return elem; 
}

onload=function(){ 
var links=document.getElementsByTagName("a"); 
for(var i=0,len=links.length;i<len;i++){ 
if(links[i].rel=="Imgbox"){ 
links[i].onclick=function(){ 
topDiv(this); 
return false; 
} 
} 
} 
} 
</ script> 
<style> 
.alphaDiv{ 
z-index:100; 
width:100%; 
height:100%; 
opacity:0.5; 
background:#666666; 
top:0; 
left:0; 
position:absolute; 
filter:alpha(opacity=50); 
} 
.top-div{ 
z-index:101; 
border:1px solid #333; 
padding:2px; 
background:#eee; 
position:absolute; 
} 
a{ 
outline:none; 
}

</style> 
</head> 
<body class="body"> 
<p>Click here to show the pic one.<br> 
Click here to show the pic two.<br>
Click me 
</p> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
注意上面的图片地址，大家自己

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

javascriptImgBox透明遮罩层背景图片展示_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签： js javascript 遮罩层

热门焦点

javascriptImgBox透明遮罩层背景图片展示_javascript技巧

javascriptImgBox透明遮罩层背景图片展示_javascript技巧

javascriptImgBox透明遮罩层背景图片展示_javascript技巧

最新推荐

猜你喜欢

热门推荐