javascript实现遮罩层动态效果实例
大家在网页上注册登录的时候，经常会看见弹出的遮罩层。
我这里实现的效果是：点击按钮弹出遮罩层，遮罩层下的内容不可选，并且登录框随着鼠标滚轮的下滑，动态的浮动到页面某个位置，点击关闭按钮关闭遮罩层。
这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色随意，能看出效果才是最重要的哈哈哈哈。
以下是html界面:
<body> <!-- 主界面 --> <div class="main"> <div onclick="show()">登录</div> </div> <!-- 设置遮罩层的div --> <div id="shade"></div> <!-- 设置登录框 --> <div id="loginBox"> <div onclick="close()">关闭</div> </div> </body>
样式表：
*{padding:0px;margin:0px;}
.main{
width:100%;
height:3000px;
}
#shade{
position:absolute;//绝对定位在页面左上角
top:0px;
left:0px;
z-index:1000;
display:none;
width:100%;
height:100%;
background:yellow;
opacity:0.3;
}
#loginBox{
position:absolute;
top:260px;
left:30%;
z-index:2000;
display:none;
width:400px;
height:200px;
background:red;
border:1px solid red;
}
js代码部分：
<script type="text/javascript">
window.onload=function(){
window.onscroll=function(){
//动态设置遮罩层的宽高与屏幕可见宽高一致，实现被遮罩页面的全覆盖
document.getElementById("shade").style.width=document.body.clientWidth+"px";
document.getElementById("shade").style.height=document.body.clientHeight+"px";
//兼容谷歌 和 ie/firefox不同浏览器，获取滚动条到浏览器顶部的位置
var h=document.body.scrollTop + document.documentElement.scrollTop;
//用定时器实现下滑页面时，登录框延迟从顶部下滑到指定位置
setTimeout(function(){
//设置登录框始终在界面距离顶部260px的位置,因为style.top获取的值是数值，不带单位，所以在表达式最后人为添加单位
document.getElementById("loginBox").style.top=260 + h +"px";
},200);
}
}
//遮罩层与登录框弹出事件
function show(){
document.getElementById("shade").style.display = "block";
document.getElementById("loginBox").style.display = "block";
}
//遮罩层与登录框隐藏事件
function close(){
document.getElementById("shade").style.display = "none";
document.getElementById("loginBox").style.display = "none";
}
</script>
以上就是啦~
以上所述是小编给大家介绍的javascript实现遮罩层动态效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>
-
原生js实现半透明遮罩层效果具体代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
JS实现遮罩层效果的简单实例
复制代码 代码如下: function show(){ var cover = document.getElementById("cover"); cover.style.width = document.documentElement.scrollWidth+"px"; cover.style.height = document.documentElement.scrollHeight+"px"; cover.style.display = &
-
js弹出div并显示遮罩层
复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy
-
js css 实现遮罩层覆盖其他页面元素附图
<div style=" position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; background-color: Black; z-index: 9999; filter: alpha(opacity=70); Opacity:0.7;"></div> z-index 必须大于遮罩元素 demo <!doctype html> <html> <head&g
-
js鼠标悬浮出现遮罩层的方法
本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl"> <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008
-
js点击按钮实现带遮罩层的弹出视频效果
本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="
-
js+html5实现半透明遮罩层弹框效果
点击按钮,出现半透明遮罩层弹框,说说自己之前发过的愁吧 1.遮罩层半透明了 弹框也跟着半透明了 就像这样 绝望吧 是哪里错了呢?你的css是这样写的吧: 应该这样: 需要注意的是这几个参数的意思:RGB Red Green Bule 3色!及212, 0, 0 三色的值混合 .最后一个参数 0.5 是指的透明度 1表示不透明 2.半遮罩层里面的内容可以上下滑动 感觉挺好玩的 /笑哭 修改就是把半遮罩层的position设置为fixed 里面的内容就不会变啦 接下来就是代码show <!docty
-
js实现遮罩层弹出框的方法
本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f
-
JS遮罩层效果 兼容ie firefox jQuery遮罩层
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu