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

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

Javascript: 用JavaScript实现浏览器地震效果; Javascript实例教程(8) 利用Javascript基于浏览器类型的重定向; Javascript实例教程(14) 鼠标触发窗口; 使主页呈现“飞舞”特效; Javascript实例教程(21) OLE Automation(1); Javascript实例教程(13) 鼠标移过时报警; Javascript实例教程(10) 随机显示图片; Javascript实例教程(2) 创建弹出式窗口; JavaScript 小技巧(第十集); Javascript实例教程(3) 创建折叠式导航菜单; Javascript实例教程(7) 利用Javascript进行密码保护; 完美解决一个事件激活多个函数(2); Javascript模拟游戏中的弹出菜单效果; Javascript实例教程(6) 在一个表单中设置和检查Cookies; JavaScript 小技巧(第八集); Javascript实例教程(4) 探测浏览器插件; JavaScript 小技巧(第九集); JavaScript学习:基础继承机制; 初学Javascript之cookie篇(译); 让弹出窗口变得“体贴”一些(javascript)

No. « ‹ 10 11 12 13 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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