这篇文章主要介绍了 JavaScript 编写页面半透明遮罩效果的简单示例, 包括一个全屏幕 div 层遮盖的方法展示, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
半透明遮罩层效果基本上都是使用插件实现的,下面为大家分享下使用原生 js 实现半透明遮罩效果,感兴趣的朋友可以参考下哈,希望对你熟悉原生 js 有所帮助
- <div>
- <h4>
- <span>
- 现在注册
- </span>
- <span>
- 关闭
- </span>
- </h4>
- <p>
- <label>
- 用户名
- </label>
- <input type="text" class="myinp" onmouseover="this.style.border='1px solid #f60'"
- onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'"
- />
- </p>
- <p>
- <label>
- 密码
- </label>
- <input type="password" class="myinp" onmouseover="this.style.border='1px solid #f60'"
- onfoucs="this.style.border='1px solid #f60'" onblur="this.style.border='1px solid #ccc'"
- />
- </p>
- <p>
- <input type="submit" value="注册" class="sub" />
- <input type="reset" value="重置" class="sub" />
- </p>
- </div>
- <div>
- </div>
- <!-- 遮罩层div-->
- <script type="text/javascript">
- var myAlert = document.getElementById("alert");
- var myMask = document.getElementById('mask');
- var reg = document.getElementById("content").getElementsByTagName("a")[0];
- var mClose = document.getElementById("close");
- reg.onclick = function() {
- myMask.style.display = "block";
- myAlert.style.display = "block";
- myAlert.style.position = "absolute";
- myAlert.style.top = "50%";
- myAlert.style.left = "50%";
- myAlert.style.marginTop = "-75px";
- myAlert.style.marginLeft = "-150px";
- document.body.style.overflow = "hidden";
- }
- mClose.onclick = function() {
- myAlert.style.display = "none";
- myMask.style.display = "none";
- }
- </script>
- </body>
- </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>
来源: http://www.phperz.com/article/17/0222/265916.html