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 相关文章推荐
自己使用jquery写的一个无缝滚动的插件
Apr 30 Javascript
jQuery zTree加载树形菜单功能
Feb 25 Javascript
jQuery validate验证插件使用详解
May 11 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
Jan 06 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
vue下跨域设置的相关介绍
Aug 26 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
使用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
php5 pdo新改动加载注意事项
2008/09/11 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP文件系统管理(实例讲解)
2017/09/19 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
2015/03/18 Javascript
如何使用HTML5地理位置定位功能
2015/04/27 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
Bootstrap table简单使用总结
2017/02/15 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
jquery一键控制checkbox全选、反选或全不选
2017/10/16 jQuery
vue实现商城上货组件简易版
2017/11/27 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Node.js 路由的实现方法
2019/06/05 Javascript
[02:32]“虐狗”镜头慎点 2016国际邀请赛中国区预选赛现场玩家采访
2016/06/28 DOTA
Python使用MySQLdb for Python操作数据库教程
2014/10/11 Python
python中split方法用法分析
2015/04/17 Python
Python简单检测文本类型的2种方法【基于文件头及cchardet库】
2016/09/18 Python
python tkinter canvas 显示图片的示例
2019/06/13 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python实现字符串中某个字母的替代功能
2019/10/21 Python
python解包用法详解
2021/02/17 Python
希尔顿酒店中国网站:Hilton中国
2017/03/11 全球购物
Alexandre Birman美国官网:亚历山大·伯曼
2019/10/30 全球购物
旅游网创业计划书
2014/01/31 职场文书
人力资源部经理岗位职责规定
2014/02/23 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
新生开学寄语大全
2015/05/28 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python