使用style 对象实现图片的覆盖（overlay）

绝地灬酷狼 2021-12-20 16:57 170阅读 0赞

<!DOCTYPE html>  
<html>

<head>  
<meta charset="UTF-8">  
<title>覆盖显示图片</title>  
</head>  
<style>  
\#outer \{  
width: 100%;  
height: 100%;  
\}  
  
.overlay \{ //这个style是通过createElement 中的设置id =overlay 的  
background-color: \#000;  
/\*//opacity 属性设置元素的不透明级别\*/  
opacity: 7;  
filter: alpha(opacity=70);  
position: fixed;  
top: 0;  
left: 0;  
/\*相对于浏览器定位，  
生成绝对定位的元素，相对于浏览器窗口进行定位。  
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。\*/  
width: 100%;  
height: 100%;  
z-index: 10;  
/\*属性设置元素的堆叠顺序。  
拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。\*/  
  
\}  
</style>  
<script type="text/javascript">  
function expandPhoto() \{  
var overlay = document.createElement("div"); //创建节点div  
overlay.setAttribute("id", "overlay"); 添加id =overlay  
overlay.setAttribute("class","overlay"); 添加class=overlay  
document.body.appendChild(overlay); 将其添加到body 尾部  
var smallImg = document.getElementById("smallImg");  
var img = document.createElement("img"); //创建img 节点  
img.setAttribute("id", "img"); //img 的 id 为img  
img.src = smallImg.getAttribute("data-larget");//获取大图，以下为图的大小，图的位置  
img.style.width = "400px";  
img.style.height = "300px";  
img.style.position = "absolute";  
img.style.zIndex = "11"  
img.style.left = "50px";  
img.style.top = "50px";  
document.body.appendChild(img);//将获取的大图添加到body的尾部  
\}  
</script>

<body>  
<div id="outer">  
<p>单击显示图效果</p>  
<img src="img/360.png" id="smallImg" data-larget="/DOMHTML/img/timg.jpg" οnclick="expandPhoto()" />  
</div>

</body>

</html>

*</body>![1262452-20180103213323518-1026688020.jpg][]![1262452-20180103213336331-878715231.jpg][]*

转载于:https://www.cnblogs.com/wxhhts/p/8185828.html

[1262452-20180103213323518-1026688020.jpg]: https://images2017.cnblogs.com/blog/1262452/201801/1262452-20180103213323518-1026688020.jpg
[1262452-20180103213336331-878715231.jpg]: /images/20211220/ded0fb78af8d46569414555480803c4b.png