JavaScript编写页面半透明遮罩效果的简单示例

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1005 次日期：2016-07-01 15:45:35

温馨提示：小编为您整理了“JavaScript编写页面半透明遮罩效果的简单示例”,方便广大网友查阅！

这篇文章主要介绍了JavaScript编写页面半透明遮罩效果的简单示例,包括一个全屏幕div层遮盖的方法展示,需要的朋友可以参考下

半透明遮罩层效果基本上都是使用插件实现的，下面为大家分享下使用原生js实现半透明遮罩效果，感兴趣的朋友可以参考下哈，希望对你熟悉原生js有所帮助

<div >

<p>

</p>

<p>

</p>

<p>

</p>

</div>

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"

//判断浏览器

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>

上一篇：Bootstrap按钮下拉菜单组件详解

下一篇：JavaScript编写点击查看大图的页面半透明遮罩层效果实例

手机网站地址：JavaScript编写页面半透明遮罩效果的简单示例

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！