js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动

更新时间：2014年04月29日 15:31:39 作者：

这篇文章主要介绍了js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动,需要的朋友可以参考下

用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="Content-Type" content="text/html; charset=UTF-8" /> 
<title>越狱的囚徒</title> 
<style type="text/css"> 
#zhezhao{ /*遮罩层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ 
position:absolute; 
z-index:1000; 
background:#ccc; 
width:100%; 
height:100%; 
opacity: 0.8; 
filter:alpha(opacity=80); 
display:none; 
} 
#denglu{ /*登陆层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ 
position:absolute; 
z-index:2000; 
width:100%; 
height:200px; 
margin:150px auto; 
display:none; 
} 
#denglu table{ /*居中显示*/ 
margin:auto; 
} 
.content{ 
width:800px; 
margin:0 auto; 
} 
#zuo{ /*这个是两边浮动的广告对联，一(左)一右*/ 
position:absolute; 
left:3px; 
top:100px; 
border:5px solid purple; 
background:#ccc; 
color:purple; 
font-size:50px; 
text-align:center; 
height:200px; 
width:85px; 
z-index:2000; 
} 
#you{ /*这个是两边浮动的广告对联，一左一(右)*/ 
position:absolute; 
right:3px; 
top:100px; 
border:5px solid purple; 
background:#ccc; 
color:purple; 
font-size:50px; 
text-align:center; 
height:200px; 
width:85px; 
z-index:2000; 
} 
</style> 
<script type="text/javascript"> 
var h=0; 
function fun1(){ //这里让登陆框 和 广告框 随着滚动条也自动滚动 保持一直可以让用户看到 
h=document.body.clientHeight; 
document.getElementById('zhezhao').style.height=h+"px"; 
window.onscroll=function(){ 
//改变登录框的位置 
//获取滚动条离开上方的距离 
var t=document.body.scrollTop+document.documentElement.scrollTop;//兼容谷歌和火狐浏览器 
//把这个值，交给denglu这div的margin-top 
document.getElementById('denglu').style.marginTop=150+t+"px"; 

document.getElementById('zuo').style.top=100+t+"px"; 
document.getElementById('you').style.top=100+t+"px"; 
} 
} 
function show(){ //激活他们 
//遮罩层 
document.getElementById('zhezhao').style.display='block'; 
//登录层 
document.getElementById('denglu').style.display='block'; 
} 
function hide(){ //隐藏他们 
//遮罩层 
document.getElementById('zhezhao').style.display='none'; 
//登录层 
document.getElementById('denglu').style.display='none'; 
} 

</script> 
</head> 
<body style="margin:0;" onload="fun1();"> 
<div id="zuo">美<br/>女</div> 
<div id="you">帅<br/>哥</div> 
<div id="zhezhao"></div> 
<div id="denglu"> 
<div> 
<table bgcolor="#ccc" width="350"> 
<tr> 
<td>登录</td><td><a href="javascript:hide();">关闭</a></td> 
</tr> 
<tr> 
<td>账号</td> 
<td><input type="text"/></td> 
</tr> 
<tr> 
<td colspan="2"><input type="submit" value="登录"/></td> 
</tr> 
</table> 
<a id="a-1" href="javascript:void();">test</a> 
</div> 
</div> 
<a href="javascript:show();">登录</a> 
<div class="content" style="background:red;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<div class="content" style="background:green;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<div class="content" style="background:blue;"> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
<br/><br/><br/><br/><br/><br/><br/><br/> 
</div> 
<br/> 
<br/> 
</body> 
</html> 

可以自己试一试多完善下，这个还是比较好玩的。

您可能感兴趣的文章:

js左侧三级菜单导航实例代码
在左侧三级菜单导航想必大家都见到过吧，它的实现过程也并不复杂，下面有个不错的示例，感兴趣的朋友可以了解下
2013-09-09
javascript滚轮事件基础实例讲解（37）
这篇文章主要为大家详细介绍了javascript滚轮事件基础实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-02-02
详解CocosCreator项目结构机制
这篇文章主要介绍了详解CocosCreator项目结构机制，只有了解这些机制后，才能更好的进行项目开发，避免潜在错误，并且快速的除错
2021-04-04
JavaScript数组基于交换的排序示例【冒泡排序】
这篇文章主要介绍了JavaScript数组基于交换的排序,结合实例形式分析了JavaScript排序算法中的冒泡排序简单实现技巧,需要的朋友可以参考下
2018-07-07
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
本文给大家介绍Bootstrap3.0建站教程(一)之bootstrap表单元素排版，本文给大家列举了文字和输入框前后排列和上下排列的实例代码，有需要的朋友参考下吧
2016-06-06
小程序实现多个选项卡切换
这篇文章主要为大家详细介绍了小程序实现多个选项卡切换，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
微信小程序图片加载失败时替换为默认图片的方法
这篇文章主要介绍了微信小程序图片加载失败时替换为默认图片的方法,本文分情况通过实例代码给大家讲解，需要的朋友可以参考下
2019-12-12
js随机生成字母数字组合的字符串随机动画数字
本篇文章给大家分享的js随机生成字母数字组合的字符串，js随机生成动画数字，包括常用的产生随机数的用法，需要的朋友可以参考下
2015-09-09
javascript图片滑动效果实现
这篇文章主要介绍了超实用的javascript图片滑动效果实现方法,实例分析了javascript通过对页面元素与相关属性的操作实现滑动菜单效果的相关技巧，具有一定参考借鉴价值，需要的朋友可以参考下
2015-11-11
微信小程序实现搜索关键词高亮的示例代码
这篇文章主要介绍了微信小程序实现搜索关键词高亮的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03