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 相关文章推荐
javascript中setInterval的用法
Jul 19 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
原生js实现class的添加和删除简单代码
Jul 12 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
vue组件中点击按钮后修改输入框的状态实例代码
Apr 14 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
微信小程序仿微信运动步数排行(交互)
Jul 13 Javascript
bootstrap下拉分页样式 带跳转页码
Dec 29 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
JS自定义滚动条效果
Mar 13 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 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 冲泡冲煮
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
比较简单实用的PHP无限分类源码分享(思路不错)
2011/10/13 PHP
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php正确输出json数据的实例讲解
2018/08/21 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
javascript import css实例代码
2008/07/18 Javascript
Javascript中常见的校验如域名、手机、邮箱等等
2014/01/02 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
js调用百度地图及调用百度地图的搜索功能
2015/09/07 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Node.js API详解之 dns模块用法实例分析
2020/05/15 Javascript
Vue插槽_特殊特性slot,slot-scope与指令v-slot说明
2020/09/04 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python实现指定字符串补全空格、前面填充0的方法
2018/11/16 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python实现五子棋程序
2020/04/24 Python
pandas数据选取:df[] df.loc[] df.iloc[] df.ix[] df.at[] df.iat[]
2020/04/24 Python
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
EJB3.1都有哪些改进
2012/11/17 面试题
工地安全检查制度
2014/02/04 职场文书
网络编辑职责
2014/03/01 职场文书
师范生求职信
2014/06/14 职场文书
搭讪开场白台词大全
2015/05/28 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL