javascript实现遮罩层动态效果实例
更新时间：2019年05月14日 09:18:56 作者：FutureLilian
这篇文章主要介绍了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实现遮罩层动态效果详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
力向导图是绘图的一种算法，实现了用以模拟粒子物理运动的 velocity Verlet 数值积分器。本文将利用D3.js实现力向导图的绘制，需要的可以参考一下2022-11-11
Vue的插槽（Slot）是一种可以让父组件向子组件传递内容的机制，这篇文章主要通过一些简单的示例为大家介绍了插槽的具体使用，感兴趣的小伙伴可以了解一下2023-06-06
获取offsetTop和offsetLeft值的js代码(兼容)
offsetTop和offsetLeft的值在某些特殊的情况下是会使用到的，为了实现值的准确获取，本文采用js代码实现下，有需求的朋友可以参考下哈2013-04-04
气泡提示框牵扯到的技术有：JS响应鼠标的事件、纯CSS制作三角形，附截图及示例代码，感兴趣的朋友可以参考下2013-08-08
低代码作为开发工具类的产品，需要有从0到1体系化的教程才可以，而且还得有教师进行辅助。否则，学习低代码是有难度的，入门很难。因为大家习惯了用代码编程，一下子过度到可视化编程，有一个思路上的转变2022-08-08
浅谈javascript中的prototype和__proto__的理解
这篇文章主要介绍了浅谈javascript中的prototype和__proto__的理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了JS使用ajax从xml文件动态获取数据显示的方法,实例分析了javascript使用Ajax技术操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了JS实现的表格操作类,可实现针对表格的添加,删除,排序,上移,下移等操作,具有一定参考借鉴价值,需要的朋友可以参考下2015-12-12
这篇文章主要介绍了webpack常用构建优化策略小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
这篇文章主要以实例的方式向大家介绍了javascript注册事件处理函数，内容很全面，感兴趣的朋友可以参考一下2016-01-01
最新评论