点击小图片遮罩显示大图片
2014-11-12 10:16
169 查看
<!DOCTYPE html>
<style>
#mask {
position:fixed;width:100%;
top:0px;left:0px;
_position:absolute;
_top:expression(documentElement.scrollTop);
background:rgba(0,0,0,0.5);
background:transparent\9;
filter:progid:DXImageTransform.Microsoft.Gradient(
startColorStr=#80000000,endColorStr=#80000000
);
display:none;
}
#mask_td {text-align:center;}
</style>
<img
src="http://web-tinker.com/images/TheMagicConch.jpg"
width="100" id="img"
/>
<table id="mask"><tr><td id="mask_td"></td></tr></table>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
var img,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
//获取文档可见区域宽度并设置到mask上
var de=document.documentElement;
mask.style.width=de.clientWidth+"px"
mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
//隐藏页面的滚动条
document[
isIE<9?"documentElement":"body"
].style.overflow="hidden";
//计算mask的大小
mask.setSize();
//显示
mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
//显示页面滚动条
document[
isIE<9?"documentElement":"body"
].style.overflow="";
//清空里面的内容
mask.td.innerHTML="";
//隐藏
mask.style.display="none";
};
//添加append方法
mask.append=function(e){
//在mask的TD里面添加内容哦你
mask.td.appendChild(e);
};
//点击mask关闭
mask.onclick=function(e){
//判断事件来源,如果是空白区域被点击了就关闭mask
e=e||event;
(e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗体大小改变时也改变mask的大小
window.onresize=function(){
mask.setSize();
};
//点击图片的事件
img.onclick=function(){
//创建一个图片对象
var o=new Image;
//设置图片的地址
o.src=img.src;
//在mask内添加内容
mask.append(o);
//显示mask
mask.show();
};
</script>
原文链接:http://www.web-tinker.com/article/20048.html
<style>
#mask {
position:fixed;width:100%;
top:0px;left:0px;
_position:absolute;
_top:expression(documentElement.scrollTop);
background:rgba(0,0,0,0.5);
background:transparent\9;
filter:progid:DXImageTransform.Microsoft.Gradient(
startColorStr=#80000000,endColorStr=#80000000
);
display:none;
}
#mask_td {text-align:center;}
</style>
<img
src="http://web-tinker.com/images/TheMagicConch.jpg"
width="100" id="img"
/>
<table id="mask"><tr><td id="mask_td"></td></tr></table>
<script>
//判断浏览器
var isIE=navigator.userAgent.match(/MSIE (\d)/i);
isIE=isIE?isIE[1]:isIE;
//声明变量
var img,mask;
//获取元素
img=document.getElementById("img");
mask=document.getElementById("mask");
mask.td=document.getElementById("mask_td");
//计算mask的大小
mask.setSize=function(){
//获取文档可见区域宽度并设置到mask上
var de=document.documentElement;
mask.style.width=de.clientWidth+"px"
mask.style.height=de.clientHeight+"px";
};
//添加show方法
mask.show=function(){
//隐藏页面的滚动条
document[
isIE<9?"documentElement":"body"
].style.overflow="hidden";
//计算mask的大小
mask.setSize();
//显示
mask.style.display=isIE==6?"block":"table";
};
//添加hide方法
mask.hide=function(){
//显示页面滚动条
document[
isIE<9?"documentElement":"body"
].style.overflow="";
//清空里面的内容
mask.td.innerHTML="";
//隐藏
mask.style.display="none";
};
//添加append方法
mask.append=function(e){
//在mask的TD里面添加内容哦你
mask.td.appendChild(e);
};
//点击mask关闭
mask.onclick=function(e){
//判断事件来源,如果是空白区域被点击了就关闭mask
e=e||event;
(e.target||e.srcElement)==mask.td&&mask.hide();
};
//窗体大小改变时也改变mask的大小
window.onresize=function(){
mask.setSize();
};
//点击图片的事件
img.onclick=function(){
//创建一个图片对象
var o=new Image;
//设置图片的地址
o.src=img.src;
//在mask内添加内容
mask.append(o);
//显示mask
mask.show();
};
</script>
原文链接:http://www.web-tinker.com/article/20048.html
相关文章推荐
- ecshop 点击商品图片弹出带关闭按钮的遮罩层 显示商品库存
- 是否在点击时在灯箱中显示图片
- 英语音标的录入。点击按钮,点击图片,点击图标等,在RTF文本框中显示字体中的字符。
- 点击图片,弹出层显示图片
- 控制图片点击之后是否显示周围点状线条
- JS操作DOM点击图片弹出层显示大图片和详细信息
- 点击小图片在本页显示大图片
- 是否在点击时在 Lightbox 中显示图片
- Wordpress ThickBox 点击图片显示下一张图的修改方法
- Wordpress ThickBox 特效修改:点击图片显示下一张图
- jQuery点击小图片显示大图片
- 点击图片显示原图
- 点击FileUpload控件时,显示图片
- 用android做的一个简单的点击按钮显示图片的程序
- Wordpress ThickBox 点击图片显示下一张图的修改方法
- Asp.net图片上传access数据库以及图片显示;点击图片以后显示[图片,以及图片的
- 求助:想实现点击按钮“下一张”就会显示下一张图片的函数
- 点击上、下一页显示图片
- GridView使用lightbox,鼠标点击显示图片效果
- Android开发之--读取文件夹下图片生成略缩图并点击显示大图