javascript ImgBox透明遮罩层背景图片展示

更新时间：2009年07月21日 23:15:40 作者：

javascript ImgBox透明遮罩层背景图片展示,就是增加了一个关闭按钮，比较实用。

<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><a href="https://www.jb51.net/images/logo.gif" rel="Imgbox">Click here to show the pic one.</a><br> <a href="http://img.jb51.net/imgby/downloadBtn.gif" rel="Imgbox">Click here to show the pic two.</a><br><a href="#">Click me</a> </p> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

注意上面的图片地址，大家自己

您可能感兴趣的文章:

详解JS中常用的Fetch API
Fetch API是一种用于进行网络请求的现代JavaScript API，提供了更简洁、强大和灵活的方式来处理异步数据交互，本文主要为大家介绍了js中js中基本用法，感兴趣的同学可以参考下
2023-07-07
手写Spirit防抖函数underscore和节流函数lodash
这篇文章主要介绍了手写Spirit防抖函数underscore和节流函数lodash，接下来将会带你们了解下这两者的区别,以及我们该如何手写实现这两个函数
2022-03-03
react基本安装与测试示例
这篇文章主要介绍了react基本安装与测试,结合实例形式分析了react基本安装命令、引用与测试相关实现技巧,需要的朋友可以参考下
2020-04-04
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Javascript-Mozilla和IE中的一个函数直接量的问题分析...
2007-08-08
js利用appendChild对<li>标签进行排序的实现方法
下面小编就为大家带来一篇js利用appendChild对<li>标签进行排序的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-10-10
Javascript call及apply应用场景及实例
这篇文章主要介绍了Javascript call及apply应用场景及实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-08-08
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
对前端工程师来说,跨浏览器的兼容性问题一直是最头疼的,测试一个小小的东西,就要打开N个浏览器,然后比较来比较去,记录个浏览器的数据,比较不同,实在是麻烦.
2010-03-03
原生JavaScript创建不可变对象的方法简单示例
这篇文章主要介绍了原生JavaScript创建不可变对象的方法,结合简单实例形式分析了基于原生JavaScript创建不可变对象的相关原理、实现方法与操作注意事项,需要的朋友可以参考下
2020-05-05
JavaScript实现定时器循环展示数组
这篇文章主要为大家详细介绍了JavaScript实现定时器循环展示数组，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-09-09
用javascript实现计算两个日期的间隔天数
用javascript实现计算两个日期的间隔天数...
2007-08-08

javascript ImgBox透明遮罩层背景图片展示

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具