设置首页
-
加入收藏
导航：
博客
-
文章
-
图片
-
下载
-
论坛
[ 首页 ]
[ ASP编程 ]
[ WEB技术 ]
[ 脚本应用 ]
[ 图文教程 ]
[ 站长资讯 ]
当前位置：
文章中心
-
脚本应用
-
简单的弹出层加遮罩层效果
相关文章
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
简单的弹出层加遮罩层效果
JS图片放大查看效果!
js，post方式实现伪ajax效果
类似QQ闪动效果
韩国google的效果
很酷的TIP效果
层展开/关闭 - 运动缓冲效果
动画效果打开层,关闭层
这里放搜索
最新文章
检测大写锁定键
JS图片切换
JavaScript 图片滑动切换效果
JavaScript 图片变换效果(ie only)
幻于算法
VBScript实现的escape和unescape功能函数
自动排版工具
精妙SQL语句介绍
CSS无图片实现圆角框
简单的弹出层加遮罩层效果
简单的弹出层加遮罩层效果
关键词：弹出层,遮罩层,效果 时间:2009年04月03日 星期五 阅读:586
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>简单的测试页面</title> <style type="text/css"> <!-- html { height: 100%; } body { margin: 0px; padding: 0px; height: 100%; } #dt_3 { cursor: pointer; } div#mbDIV { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #AAAAAA; z-index: 10; filter: alpha(opacity=80);opacity:0.8; } div#loginDIV { position: absolute; width: 300px; height: 150px; background-color: #FFFF00; z-index: 20; } div#loginTopDIV { width: 100%; height: 20px; background-color: #FF0000; cursor: move; } --> </style> <script type="text/javascript"> <!-- function show(ele) { eval(ele + ".style.display = ''"); } function hidden(ele) { eval(ele + ".style.display = 'none'"); } //--> </script> </head> <body> <div style="overflow: hidden;"> <h3>请点击 --> 03号拖拉机</h3> <p id="dt_1">01号拖拉机</p> <p id="dt_2">02号拖拉机</p> <p id="dt_3">03号拖拉机</p> <p id="dt_4">04号拖拉机</p> <p id="dt_5">05号拖拉机</p> <p id="dt_6">06号拖拉机</p> <p id="dt_7">07号拖拉机</p> <p id="dt_8">08号拖拉机</p> <p id="dt_9">09号拖拉机</p> <p id="dt_10">10号拖拉机</p> <p id="dt_11">11号拖拉机</p> </div> <div id="mbDIV" style="display: none;"></div> <div id="loginDIV" style="top: 200px;left: 300px;display: none;"> <div id="loginTopDIV">Move</div> <p style="text-align: center;">登陆内容在这里哦</p> <form action="#" method="get" style="text-align: center;"> <input type="button" value="确定" id="button_1" /> <input type="button" value="取消" id="button_2" /> </form> </div> <script type="text/javascript"> <!-- /** * 这里是乱七八遭信息 * */ for(var i=1;i<=11;i++) { eval("var dt_" + i + " = document.getElementById('dt_" + i + "')"); } var mbDIV = document.getElementById("mbDIV"); var loginDIV = document.getElementById("loginDIV"); var loginTopDIV = document.getElementById("loginTopDIV"); document.getElementById("button_1").onclick = function() { hidden("loginDIV"); hidden("mbDIV"); } document.getElementById("button_2").onclick = function() { hidden("loginDIV"); hidden("mbDIV"); } dt_3.onclick = function() { loginDIV.style.top = "200px"; loginDIV.style.left = "300px"; show("loginDIV"); show("mbDIV") } /** *这里写的是拖动信息 * */ loginTopDIV.onmousedown = Down; var tHeight,lWidth; function Down(e) { var event = window.event || e; tHeight = event.clientY - parseInt(loginDIV.style.top.replace(/px/,"")); lWidth = event.clientX - parseInt(loginDIV.style.left.replace(/px/,"")); document.onmousemove = Move; document.onmouseup = Up; } function Move(e) { var event = window.event || e; var top = event.clientY - tHeight; var left = event.clientX - lWidth; //判断 top 和 left 是否超出边界 top = top < 0 ? 0 : top; top = top > document.body.offsetHeight - 150 ? document.body.offsetHeight - 150 : top; left = left < 0 ? 0 : left; left = left > document.body.offsetWidth - 300 ? document.body.offsetWidth - 300 : left; loginDIV.style.top = top + "px"; loginDIV.style.left = left +"px"; } function Up() { document.onmousemove = null; } //--> </script> </body> </html>
提示：可以先修改部分代码后再运行
上一篇：
浏览器判断脚本
下一篇：
自动排版工具
1条记录
访客评论
什么跟什么？可以收到？
holley
于 2009-5-5 10:57:48 发表
#1
发表评论
昵称
(必填)
内容
(必填)
答案
(必填)
记住我，再次发表不需要重填个人信息。
不想保留信息请
删除cookie
！
友情链接
天意设计
与蓝雨对话
Copyright © 2008-2009
蓝雨设计
闽icp备05009764号
Powered by
Bcms X2
. Processed in 0.000000 second(s), 0 queries
1条记录访客评论
什么跟什么？可以收到？