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 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 Javascript
浅谈Javascript 执行顺序
Dec 18 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
jQuery简单实现验证邮箱格式
Jul 15 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue中watch和computed的区别与使用方法
Aug 23 Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 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
多重?l件?合查?(二)
2006/10/09 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
php时间计算相关问题小结
2016/05/09 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
React实现双向绑定示例代码
2016/09/19 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
AngularJS 防止页面闪烁的方法
2017/03/09 Javascript
angularJS实现动态添加,删除div方法
2018/02/27 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
vue 实现小程序或商品秒杀倒计时
2019/04/14 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
react结合bootstrap实现评论功能
2020/05/30 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
windows下numpy下载与安装图文教程
2019/04/02 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
Django数据库迁移常见使用方法
2020/11/12 Python
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
安全保卫工作竞聘材料
2014/08/25 职场文书
运动会加油稿20字
2014/11/15 职场文书
个性与发展自我评价
2015/03/06 职场文书
优秀团员自我评价
2015/03/10 职场文书
水电施工员岗位职责
2015/04/11 职场文书
单方投资意向书
2015/05/11 职场文书
python获取对象信息的实例详解
2021/07/07 Python
深入理解go slice结构
2021/09/15 Golang
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs