JavaScript编写点击查看大图的页面半透明遮罩层效果实例


Posted in Javascript onMay 09, 2016

 这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的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 相关文章推荐
说说JSON和JSONP 也许你会豁然开朗
Sep 02 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
Java/JS获取flash高宽的具体方法
Dec 27 Javascript
浅谈JavaScript的事件
Feb 27 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
Aug 21 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
jQuery弹框插件使用方法详解
May 26 jQuery
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
May 09 #Javascript
Bootstrap模仿起筷首页效果
May 09 #Javascript
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
You might like
国内咖啡文化
2021/03/03 咖啡文化
win7计划任务定时执行PHP脚本设置图解
2014/05/09 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
Node调试工具JSHint的安装及配置教程
2014/05/27 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
Bootstrap3学习笔记(二)之排版
2016/05/20 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
2018/01/09 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
vue实现移动端触屏拖拽功能
2020/08/21 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
2020/10/30 Javascript
Python socket.error: [Errno 98] Address already in use的原因和解决方法
2014/08/25 Python
python使用tornado实现登录和登出
2018/07/28 Python
TensorFlow Session会话控制&amp;Variable变量详解
2018/07/30 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
简单聊聊H5的pushState与replaceState的用法
2018/04/03 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
HTML5拖放API实现拖放排序的实例代码
2017/05/11 HTML / CSS
Notino意大利:购买香水和化妆品
2018/11/14 全球购物
澳大利亚领先的折扣药房:Chemist Direct(有中文站)
2018/11/24 全球购物
《这儿真好》教学反思
2014/02/22 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
java高级用法JNA强大的Memory和Pointer
2022/04/19 Java/Android