




下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、JavaScript编写点击查看大图的页面半透亮遮罩层效果实例_ 这篇文章主要介绍了JavaScript制作点击查看大图的页面遮罩层效果实例,透亮部分这里用法的是CSS3的rgba,兼容性还是过得去的,需要的伴侣可以参考下 这个效果用的很频繁,常常都会有人问我这个问题,所以要把它写成文章。下次再有人问就挺直把这篇文章的URL丢出去就好了。这个效果很简洁所以我就不做太多说明白,具体的看看代码说明就会明白。下面就是全部代码,复制到HTML中就可以运行的。 !DOCTYPE html style #mask position:fixed;width:100%; top:0px;left:0px; _
2、position:absolute; _top:expression(documentElement.scrollTop); background:rgba(0,0,0,0.5); background:transparent9; filter:progid:DXImageTransform.Microsoft.Gradient( startColorStr=#80000000,endColorStr=#80000000 ); display:none; #mask_td text-align:center; /style img src=http:/web- width=100 id=img
3、 / table id=masktrtd id=mask_td/td/tr/table script /推断扫瞄器 var isIE=navigator.userAgent.match(/MSIE (d)/i); isIE=isIE?isIE1:isIE; /声明变量 var img,mask; /猎取元素 img=document.getElementById(img); mask=document.getElementById(mask); mask.td=document.getElementById(mask_td); /计算mask的大小 mask.setSize=function(
4、) /猎取文档可见区域宽度并设置到mask上 var de=document.documentElement; mask.style.width=de.clientWidth+px mask.style.height=de.clientHeight+px; ; /添加show方法 mask.show=function() /隐蔽页面的滚动条 document isIE9?documentElement:body .style.overflow=hidden; /计算mask的大小 mask.setSize(); /显示 mask.style.display=isIE=6?block:table
5、; ; /添加hide方法 mask.hide=function() /显示页面滚动条 document isIE9?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
6、e=e|event; (e.target|e.srcElement)=mask.tdmask.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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 高效种植农业方案指导书
- 2025租赁合同(样本)
- 2025年劳动合同范本模板示例
- 2025餐饮店陈列服务合同协议书范本
- 信息安全管理体系构建指南
- 电信行业5G网络覆盖与云计算技术融合方案
- 河北2021年执业药师执业药师继续教育公需课合集
- 创意设计与时尚产业作业指导书
- 智能家居安全防护指南
- 股份制企业合作方案设计与实施计划
- 2025年宜昌科技职业学院单招职业技能测试题库完整
- 2025年长春医学高等专科学校单招职业技能测试题库及完整答案1套
- 2024全球感染预防与控制报告
- 春季传染病预防科普宣传
- 广播电视采访与制作知到智慧树章节测试课后答案2024年秋汉口学院
- 2025年中国华电集团海南有限公司招聘笔试参考题库含答案解析
- ERAS理念及临床实践
- 合规教育培训
- 加油站安全检查表
- 化工设备安全操作规程
- 工业发展现状及未来趋势分析 汇报材料
评论
0/150
提交评论