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
投稿猜你喜欢
require.js+vue开发微信上传图片组件
2024-06-05 15:31:01
python画条形图实例
2023-12-04 12:32:33
python连接数据库的方法
2024-01-25 18:21:06
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2023-08-26 23:12:32
Python创建文件和追加文件内容实例
2021-03-15 04:38:09
vue如何通过params和query传值(刷新不丢失)
2024-05-09 15:17:23
golang进程内存控制避免docker内oom
2024-05-09 09:47:11
MySQL触发器使用过程详解
2024-01-28 08:22:55
Python计算多幅图像栅格值的平均值
2021-03-28 01:41:05
Python MySQL 日期时间格式化作为参数的操作
2024-01-12 23:52:13
Python查找数组中数值和下标相等的元素示例【二分查找】
2023-11-04 12:55:45
Python 列表去重去除空字符的例子
2021-07-11 02:49:14
MySql完整卸载的四个步骤详解
2024-01-18 00:30:52
Python二次规划和线性规划使用实例
2023-08-28 05:37:10
Python机器学习之KNN近邻算法
2022-05-12 23:14:17
python如何写try语句
2022-05-03 07:21:39
使用python实现http及ftp服务进行数据传输的方法
2021-08-26 01:20:19
python数组排序方法之sort、sorted和argsort详解
2021-02-01 19:26:12
给SQL Server传送数组参数的变通办法
2008-11-25 11:39:00
python 实现朴素贝叶斯算法的示例
2023-12-09 12:59:11