js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动_javascript_ThinkSAAS
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
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/ charset=UTF-8" /& &title&越狱的囚徒&/title& &style type="text/css"& #zhezhao{ /*遮罩层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ position: z-index:1000; background:# width:100%; height:100%; opacity: 0.8; filter:alpha(opacity=80); display: } #denglu{ /*登陆层 先隐藏起来 后面我会通过JS修改display: 为block 让他显示出来*/ position: z-index:2000; width:100%; height:200 margin:150 display: } #denglu table{ /*居中显示*/ margin: } .content{ width:800 margin:0 } #zuo{ /*这个是两边浮动的广告对联，一(左)一右*/ position: left:3 top:100 border:5 background:# color: font-size:50 text-align: height:200 width:85 z-index:2000; } #you{ /*这个是两边浮动的广告对联，一左一(右)*/ position: right:3 top:100 border:5 background:# color: font-size:50 text-align: height:200 width:85 z-index:2000; } &/style& &script type="text/javascript"& var h=0; function fun1(){ //这里让登陆框 和 广告框 随着滚动条也自动滚动 保持一直可以让用户看到 h=document.body.clientH document.getElementById(&zhezhao&).style.height=h+"px"; window.onscroll=function(){ //改变登录框的位置 //获取滚动条离开上方的距离 var t=document.body.scrollTop+document.documentElement.scrollT//兼容谷歌和火狐浏览器 //把这个值，交给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:"& &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:"& &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:"& &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&
可以自己试一试 多完善下，这个还是比较好玩的。 
PHP开发框架
开发工具/编程工具
服务器环境
ThinkSAAS商业授权：
ThinkSAAS为用户提供有偿个性定制开发服务
ThinkSAAS将为商业授权用户提供二次开发指导和技术支持
让ThinkSAAS更好，把建议拿来。
开发客服微信广告代码下载|对联广告代码|浮动广告代码|漂浮广告代码|js广告代码|广告代码
&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&&|&
广告代码源码列表
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&
共 13 个源码&&首页 | 上一页 | 1 | 下一页 | 尾页
&100个源码/页&&转到第页当前位置： >
找到&&对联广告&&( 13 个)
jQuery缓缓弹出广告代码
大家关注的 ??????
你可能感兴趣的内容欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 网页可上下浮动滚动对联特效
特效演示效果截图
可控制左右对联广告的、、等
对应更改使用说明找到JS文件夹里的ad-01.js文件如下代码：
&document.write(&&div id=AdLayer1 style='position:visibility:z-index:1'&&a href='http:\/\/\/'&&img src=\&images\/ad-01.gif\& alt=\&css自学\& \/&&\/a&&/div&&/div&&
+&&div id=AdLayer2 style='position:visibility:z-index:1'&&a href='http:\/\/\/'&&img src=\&images\/ad-01.gif\& alt=\&div css自学门户\& \/&&\/a&&/div&&/div&&);
以上：&&a href='http:\/\/\/'&&img src=\&images\/ad-01.gif\& alt=\&css自学\& \/&&\/a&&对应修改为自己链接和广告图像地址即可
此CSS+JS对联特效演示地址：
简洁对联广告特效下载地址：
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 11:37
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台}