图片
CSS
JS广告
便捷
下载
解答
截图
高清壁纸
后台模板
PS插件
网页特效
Css新闻
推荐代码
页面应用
技术文章
图片展示
广告条
广告代码
软件类
在线工具
常用信息
动画制作
图片处理
辅助小工具
转换软件
其他
软件问题
系统问题
网页问题
常识整理
互联网价值
网站
图标
APP
按钮
公告
2013网站频道新版上线,功能持续完善中……
02.17
更新
mac系统PS数位板没有压感解决方案
01.27
查看windows10系统是否激活
08.31
windows10激活失败,亲测最有效的解决方法
08.31
Mac OS 您需要安装旧 Java SE 6 运行环境才能打开
04.10
Adobe adobeau2017英文转换为中文[汉化方法]
04.01
Mac电脑系统翻墙方法
05.26
最全手机APP中的尺寸规范
05.12
中文WebFont解决方案Font-Spider
09.02
互联网
JS控件
按钮
黑色
灰色
白色
蓝色
绿色
黄色
橙色
>
代码
>
图层样式特效
点击弹出层特效
上一篇
下一篇
0
作者: 来源: 日期:2009/6/28 15:11:19 人气:
标签:
varuserAgent=navigator.userAgent.toLowerCase();varis_opera=userAgent.indexOf('opera')!=-1&&opera.version();varis_saf=userAgent.indexOf('applewebkit')!=-1||navigator.vendor=='AppleComputer,Inc.';varis_…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!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=gb2312" /> <title></title> <STYLE> #login{ position: relative; display: none; top: 20px; left: 30px; background-color: #ffffff; text-align: center; border: solid 1px; padding: 10px; z-index: 1; } </STYLE> <script type="text/javascript"> var W = screen.width;//取得屏幕分辨率宽度 var H = screen.height;//取得屏幕分辨率高度 function M(id){ return document.getElementById(id);//用M()方法代替document.getElementById(id) } function MC(t){ return document.createElement(t);//用MC()方法代替document.createElement(t) }; //判断浏览器是否为IE function isIE(){ return (document.all && window.ActiveXObject && !window.opera) ? true : false; } //取得页面的高宽 function getBodySize(){ var bodySize = []; with(document.documentElement) { bodySize[0] = (scrollWidth>clientWidth)?scrollWidth:clientWidth;//如果滚动条的宽度大于页面的宽度,取得滚动条的宽度,否则取页面宽度 bodySize[1] = (scrollHeight>clientHeight)?scrollHeight:clientHeight;//如果滚动条的高度大于页面的高度,取得滚动条的高度,否则取高度 } return bodySize; } //创建遮盖层 function popCoverDiv(){ if (M("cover_div")) { //如果存在遮盖层,则让其显示 M("cover_div").style.display = 'block'; } else { //否则创建遮盖层 var coverDiv = MC('div'); document.body.appendChild(coverDiv); coverDiv.id = 'cover_div'; with(coverDiv.style) { position = 'absolute'; background = '#CCCCCC'; left = '0px'; top = '0px'; var bodySize = getBodySize(); width = bodySize[0] + 'px' height = bodySize[1] + 'px'; zIndex = 0; if (isIE()) { filter = "Alpha(Opacity=60)";//IE逆境 } else { opacity = 0.6; } } } } //让登陆层显示为块 function showLogin() { var login=M("login"); login.style.display = "block"; } //设置DIV层的样式 function change(){ var login = M("login"); login.style.position = "absolute"; login.style.border = "1px solid #CCCCCC"; login.style.background ="#F6F6F6"; var i=0; var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*4)/2+"px"; login.style.top = (bodySize[1]/2-100-i*i)+"px"; login.style.width = i*i*4 + "px"; login.style.height = i*i*1.5 + "px"; popChange(i); } //让DIV层大小循环增大 function popChange(i){ var login = M("login"); var bodySize = getBodySize(); login.style.left = (bodySize[0]-i*i*4)/2+"px"; login.style.top = (bodySize[1]/2-100-i*i)+"px"; login.style.width = i*i*4 + "px"; login.style.height = i*i*1.5+ "px"; if(i<=10){ i++; setTimeout("popChange("+i+")",10);//设置超时10毫秒 } } //打开DIV层 function open() { change(); showLogin(); popCoverDiv() void(0);//不进行任何操作,如:<a href="#">aaa</a> } //关闭DIV层 function close(){ M('login').style.display = 'none'; M("cover_div").style.display = 'none'; void(0); } </script> </head> <body> <a href="javascript:open();">登陆</a> <div id="login"> <span>用户登陆</span> <div id="panel"> <lable>用户名: </lable><input type="text" size="20" /> <lable>密码: </lable><input type="password" size="20"> <input type="checkbox" /><lable>登陆</lable> </div> <input type="button" value="提交" /> <a href="javascript:close();">关闭</a> </div> </body> </html>
代码由中国网站频道搜集整理
加关注
关于我们
帮助中心
意见反馈
设计导航
Copyright 2008
网站频道
All Rights Resverved.
提供:网页特效 JS广告 网站截图 酷站推荐 交流群:3506863
页面执行时间0.1074秒 查询数据库4次