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


Posted in Javascript onApril 29, 2014

用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写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Javascript 相关文章推荐
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
javascript实现的距离现在多长时间后的一个格式化的日期
Oct 29 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery子窗体取得父窗体元素的方法
May 11 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
微信小程序 本地存储及登录页面处理实例详解
Jan 11 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
Feb 02 Javascript
window resize和scroll事件的基本优化思路
Apr 29 #Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 #Javascript
JS截取url中问号后面参数的值信息
Apr 29 #Javascript
javascript类型转换示例
Apr 29 #Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
Apr 29 #Javascript
javascript中使用正则计算中文长度的例子
Apr 29 #Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 #Javascript
You might like
PHP ajax 分页类代码
2008/11/13 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
PHP创建XML的方法示例【基于DOMDocument类及SimpleXMLElement类】
2019/09/10 PHP
js模拟点击事件实现代码
2012/11/06 Javascript
formvalidator验证插件中有关ajax验证问题
2013/01/04 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
基于JavaScript实现树形下拉框
2016/08/10 Javascript
Angular4开发解决跨域问题详解
2017/08/28 Javascript
javascript计算对象长度的方法
2017/10/25 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python模拟百度登录实例详解
2016/01/20 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
Python3常用内置方法代码实例
2019/11/18 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
浅析两列自适应布局的3种思路
2016/05/03 HTML / CSS
业务助理岗位职责
2013/11/18 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
vue-cropper插件实现图片截取上传组件封装
2021/05/27 Vue.js