javascript ImgBox透明遮罩层背景图片展示
时间：2024-02-27 04:51:07
<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>
注意上面的图片地址，大家自己
标签：javascript,ImgBox,透明遮罩层
0
投稿猜你喜欢
python中为main方法传参问题
2023-05-20 04:48:12
Python类的继承、多态及获取对象信息操作详解
2023-09-09 21:27:52
python画图常规设置方式
2023-11-25 03:52:04
Python装饰器实现方法及应用场景详解
2022-04-30 22:57:49
python opencv 简单阈值算法的实现
2023-04-04 04:23:03
Mysql删除重复数据并且只保留一条(附实例!)
2024-01-27 04:48:27
Python 数值区间处理_对interval 库的快速入门详解
2022-08-12 00:18:53
利用arcgis的python读取要素的X,Y方法
2023-03-13 11:27:05
DedeCMS 5.7 sp1远程文件包含漏洞(CVE-2015-4553)
2022-05-31 17:37:05
Python中Matplotlib的点、线形状、颜色以及绘制散点图
2023-06-11 00:32:26
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2024-02-24 23:04:24
举例讲解Python中的list列表数据结构用法
2021-05-07 08:02:53
如何实现Django Rest framework版本控制
2022-10-30 02:29:19
pyhton学习与数据挖掘self原理及应用分析
2023-07-04 23:19:11
python 抓包保存为pcap文件并解析的实例
2023-04-03 03:52:04
python如何寻找主串中所有指定子串下标
2023-11-27 08:38:41
vue+php实现的微博留言功能示例
2023-11-18 01:47:02
sqlserver2005 xml字段的读写操作
2024-01-16 23:00:37
Python基础教程之if判断,while循环,循环嵌套
2023-11-05 12:56:07
php判断输入不超过mysql的varchar字段的长度范围
2023-11-14 12:02:10