JavaScript编写点击查看大图的页面半透明遮罩层效果实例
更新时间：2016年05月09日 18:07:16 作者：次碳酸钴
这篇文章主要介绍了JavaScript制作点击查看大图的页面遮罩层效果实例,透明部分这里使用的是CSS3的rgba,兼容性还是过得去的,需要的朋友可以参考下
这个效果用的很频繁，经常都会有人问我这个问题，所以要把它写成文章。下次再有人问就直接把这篇文章的URL丢出去就好了。这个效果很简单所以我就不做太多说明了，具体的看看代码注释就会明白。下面就是全部代码，复制到HTML中就可以运行的。
<!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>
这个效果是没有什么难点了，最困难的也许就是半透明的实现了吧。CSS3的opacity和IE的alpha都可以实现半透明，但是那是整个元素的半透明。使用那种方法就意味着子元素也被半透明了，所以我们必须把透明设置到背景上，而不是整个元素上。CSS3中可以直接使用rgba来设置。IE中没有这样的方法，但是可以使用渐变滤镜来代替它，因为渐变滤镜也是支持透明的。还有，在IE9中，同时兼容CSS3的透明和滤镜的透明，如果两个都使用，页面的透明度就会不对。所以我们在IE9中屏蔽了其中一种透明效果。
还有一点问题就是兼容IE6的，IE6不支持fixed所以我们需要使用absolute和动态设置top来兼容它。然后就是mask的大小计算问题，这个也存在一个浏览器差异，其实这个效果中的浏览器差异问题还是挺大的，不过都是一些小问题看到了就会明白没有长篇大论的必要。
相关文章
这篇文章主要介绍了JavaScript基于面向对象之创建对象，对创建对象进行了详细描述，感兴趣的小伙伴们可以参考一下2015-12-12
如何用JS播放wav文件，理论上用js在网页里嵌入一个window播放器的插件,可以播放的。,不过通用性不是很好,IE下可以用，感兴趣的朋友可以参考下哈本文2013-04-04
这篇文章主要介绍了理解JavaScript设计模式中的单例模式，单例模式即Singleton Pattern是最简单的设计模式之一，下文更多相关介绍感兴趣的小伙伴可以参考一下2022-04-04
本文主要介绍了js定时器不准确问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
这篇文章主要介绍了如何实现一个webpack模块解析器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
这篇文章主要介绍了bootstrap表格内容过长时用省略号表示的解决方法,需要的朋友可以参考下2017-11-11
Javascript中call，apply，bind方法的详解与总结
本文主要Javascript中call，apply，bind方法的进行全面分析，并在文章结尾对call，apply，bind方法的联系和区别做了总结，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
这篇文章主要为大家详细介绍了BootStrap表单时间选择器的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了js实现批量删除功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax
这篇文章主要介绍了JSON 的正确用法探讨：Pyhong、MongoDB、JavaScript与Ajax的相关资料,具有参考借鉴价值，需要的朋友一起学习吧2016-05-05
最新评论