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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript ImgBox透明遮罩层背景图片展示

Javascript: javascript if 的简化代码; javascript下with 的简化代码写法; javascript简化代码 A=alert w=document.writeln; js 调整select 位置的函数; JS应用之禁止抓屏、复制、打印; js加解密脚本解密; js＋vml创建3D页面效果代码; javascript简写效果“神秘的眼睛”; js实现的定时关闭页面或定时提醒效果代码; js 字数统计，区分英汉; js双色时间效果代码; js计算时间过去的时间; 一个javascript参数的小问题; textarea支持图形编辑的实现方法; JavaScript面向对象编程; 动态生成的IFRAME，设置SRC时的，不同位置带来的影响; JObj预览一个JS的框架; 去除有数组中重复的元素; 用JObj实现的渐变效果; 给自定义对象加上自定义事件的支持的教程

No. « ‹ 93 94 95 96 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 476 ::

收藏到网摘: n/a

Prototype String对象学习 javascript FAQ函数(提问+回复)

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">
<a href="/upload/tech/20091012/20091012100202_15de21c670ae7c3f6f3f1f37029303c9.gif" rel="Imgbox">Click here to show the pic one.</a><br>
<a href="/upload/tech/20091012/20091012100203_fde9264cf376fffe2ee4ddf4a988880d.gif" rel="Imgbox">Click here to show the pic two.</a><br>
<a href="#">Click me</a>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

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

Prototype String对象学习 javascript FAQ函数(提问+回复)

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

评论 (0) All