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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
jquery解析JSON数据示例代码
Mar 17 Javascript
使用jQuery的attr方法来修改onclick值
Jul 07 Javascript
JavaScript实现Iterator模式实例分析
Jun 09 Javascript
详解vue-cli 构建Vue项目遇到的坑
Aug 30 Javascript
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
JavaScript实现一个带AI的井字棋游戏源码
May 21 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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
csdn 批量接受好友邀请
2009/02/19 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
js 中将多个逗号替换为一个逗号的代码
2014/06/07 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
深入理解JavaScript 函数
2016/06/06 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
微信小程序点击控件修改样式实例详解
2017/07/07 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
小程序云开发初探(小结)
2018/10/24 Javascript
vue elementui form表单验证的实现
2018/11/11 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
[08:53]DOTA2每周TOP10 精彩击杀集锦vol.9
2014/06/26 DOTA
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python实现按照指定要求逆序输出一个数字的方法
2018/04/19 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
TensorFlow MNIST手写数据集的实现方法
2020/02/05 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
Django如何使用redis作为缓存
2020/05/21 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
七年级数学教学反思
2014/01/22 职场文书
个人业务学习心得体会
2016/01/25 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers