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

最新推荐文章于 2024-05-20 15:17:08 发布

weixin_34406061

最新推荐文章于 2024-05-20 15:17:08 发布

阅读量379

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wxhhts/p/8185828.html

版权

<!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>

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

weixin_34406061

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用style 对象实现图片的覆盖（overlay）

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>覆盖显示图片</title> </head> <style> #outer { width: 100%; height: 100%; } .overlay { ...
复制链接

扫一扫