Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript 页面遮罩查看大图

  这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的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的大小计算问题,这个也存在一个浏览器差异,其实这个效果中的浏览器差异问题还是挺大的,不过都是一些小问题看到了就会明白没有长篇大论的必要。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^