javascript实现遮罩层动态效果实例

2022-01-14,,,,

这篇文章主要介绍了javascript实现遮罩层动态效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

大家在网页上注册登录的时候,经常会看见弹出的遮罩层。

我这里实现的效果是:点击按钮弹出遮罩层,遮罩层下的内容不可选,并且登录框随着鼠标滚轮的下滑,动态的浮动到页面某个位置,点击关闭按钮关闭遮罩层。

这是鼠标滚动下滑到页面中间某部分时画面。虽然界面简单颜色随意,能看出效果才是最重要的哈哈哈哈。

以下是html界面:

   登录 关闭

样式表:

 *{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代码部分:

 

以上就是啦~

以上就是javascript实现遮罩层动态效果实例的详细内容,更多请关注本站其它相关文章!

《javascript实现遮罩层动态效果实例.doc》

下载本文的Word格式文档,以方便收藏与打印。