JavaScript编写点击查看大图的页面半透明遮罩层效果实例
作者:次碳酸钴 发布时间:2024-02-24 03:33:08
标签:JavaScript,遮罩层,图片
这个效果用的很频繁,经常都会有人问我这个问题,所以要把它写成文章。下次再有人问就直接把这篇文章的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的大小计算问题,这个也存在一个浏览器差异,其实这个效果中的浏览器差异问题还是挺大的,不过都是一些小问题看到了就会明白没有长篇大论的必要。
0
投稿
猜你喜欢
- 如何在线压缩Access数据库?Access数据库可以在线压缩吗?可以的,代码和说明见下:compact.asp<%option&nb
- PHP addcslashes() 函数实例在字符 "W" 前添加反斜杠:<?php $str = addcsla
- PHP有效的时间戳典型范围是格林威治时间 1901 年 12 月 13 日 20:45:54 到 203
- 用Django开发网站的时候,前端页面内的文本框总是不能被设置为只读,找了一些资料发现可以在form class里面进行设置。方法一:首先在
- 今天有点囧a=['XXXX_game.sql', 'XXXX_game_sp.sql', 'XXXX
- 前言:目前我们使用的绝大多数计算机程序,无论是办公软件,浏览器,甚至游戏、视频都是通过菜单界面系统配置的,它几乎成了我们使用机器的默认方式。
- 关于这个话题,我也看到网上有其他方法来解决。 不过从性能和代码量上来看,我有更好的办法。 在这里和大家 分享。 原理其实很简单, 知识1、长
- 前提条件:本地已经安装好oracle单实例,能使用plsql developer连接,或者能使用TNS连接串远程连接到oracle集群读取e
- 函数:split()Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串。通过指
- 所谓的列表推导式,就是指的轻量级循环创建列表。基本使用方式# 创建一个0-10的列表a = [x for x in range(11)]pr
- 安装了pycharm之后有一个新装的python解释器,顶替了之前系统的python那样的话,原来利用pip安装的一些库会无法import.
- 在python中,用于数组拼接的主要来自numpy包,当然pandas包也可以完成。而,numpy中可以使用append和concatena
- Python docx module for Word or WPS processing本文是通过docx把word中的表格中的某些已填好
- 使用 Django自带的 auth 用户验证功能,编写函数,使用 is_authenticated 检查用户是否登录,结果报错:TypeEr
- 判断汉字if (System.Text.Encoding.GetEncoding("gb2312").GetBytes(
- 本文实例为大家分享了python实现书法碑帖图片分割的具体代码,供大家参考,具体内容如下一、功能实现效果1、选择要分割的碑帖图片2、选择碑帖
- Django 的 ORM 有多种关系:一对一,多对一,多对多各自定义的方式为 :一对一: OneToOneField多对一: Foreign
- 导语哈喽铁汁们好久不见吖~小编已经复工了于是马不停蹄赶来给大家准备新年礼物算开工礼物吧!海龟来作图虎年就是要画老虎2022不用纸和笔~今晚画
- 前言保留小数位是我们经常会碰到的问题,尤其是刷题过程中。那么在python中保留小数位的方法也非常多,但是笔者的原则就是什么简单用什么,因此
- Python使用pandas导入xlsx格式的excel文件内容1. 基本导入在 Python中使用pandas导入.xlsx文件的方法是r