模板无忧
网页特效
每日更新
|
TOP排行榜
|
Tag标签
|
充值
无忧首页
网页模板
程序模板
建站教程
视频教程
网页特效
图标素材
字体下载
站长工具
站长问答
网页特效
菜单导航
图片特效
文本链接
层和布局
页面背景
表单按钮
日期时间
计算转换
键盘鼠标
浏览器
游戏娱乐
综合其它
常用代码
jQuery特效
Prototype
Ajax/JavaScript
ExtJS
CSS特效
在线编辑器
Mootools
HTML
JS广告代码合集
站长工具
站长常用软件
网站综合查询
Alexa排名查询
Google PR查询
域名Whois查询
网站收录查询
友情链接查询
CSS2中文手册
CSS精简优化工具
网页特效代码
模板无忧
>
网页特效
>
层和布局特效代码
>
收藏
分享
查看评论
层和布局
演示
一个很牛的登录窗口特效_层和布局特效
查看演示效果
特效Tag:
登录
添加
一个登录窗口穿越星空来到你面前,很深遂的感觉,运行一下试试。
<html> <head> <title>一个很牛的登录窗口</title> <style> body { padding:0px; margin:0px; background-Color:black; border-width:0px; font-size:12px; color:#DDD; overflow:hidden; } #divLogin { padding:32px; background-Color:#EEE; color:navy; filter:alpha(opacity=60); z-Index:90; text-align:center; } #divLogin td{ color:#666; } .input0 { border:#000 1px solid; width:158px; height:22px; color:navy; } .input1 { border:#000 1px solid; width:80px; height:20px; background-Color:transparent; color:navy; padding-top:2px; } </style> <script> wx=wxx=screen.availWidth; hx=hxx=screen.availHeight; ds=1800; stars=new Array(); starTimer=""; logined=false; top.moveTo(0,0);top.resizeTo(wxx,hxx); function init(){ wx=document.body.clientWidth; hx=document.body.clientHeight; for(var i=0;i<16;i++)createStar(); startMoveStar(); startLoginMove(); } function startLoginMove(){ divLogin.x=-175; divLogin.y=-100; divLogin.z=100000; divLogin.c=0; divLogin.size=350; divLogin.speed=500; setTimeout(loginMove,10); } function loginMove(){ divLogin.z-=divLogin.speed; var tRe=d3d2(divLogin.x,divLogin.y,divLogin.z,divLogin.size,divLogin.c).split(":"); with(divLogin.style){ position="absolute"; left=tRe[0]; top=tRe[1]; if(parseInt(tRe[2])<=0){ display="none"; }else{ display=""; width=tRe[2]; height=parseInt(tRe[2])*200/350; overflow="hidden"; } } if(divLogin.z>200){ setTimeout(loginMove,10); }else{ with(divLogin.style){ position="absolute"; left=wx/2+divLogin.x; top=hx/2+divLogin.y; display=""; width=-2*divLogin.x; height=-2*divLogin.y; overflow="hidden"; } divLogin.children[0].style.display=""; stopMoveStar(); shakeWin(); } } function showContent(i){ i=isNaN(i)?-1:parseInt(i); i++; try{ switch(i%7){ case 0:divLogin.style.top=50;break; case 1:divLogin.style.top=-100;break; case 2:divLogin.style.top=-160;break; case 3: divLogin.style.top=-300; divLogin.children[0].style.display="none"; divLogin.children[0].innerHTML=divMain.innerHTML; break; case 4: divLogin.x=-wx/2+50; divLogin.y=-hx/2+30; divLogin.z=70000; divLogin.c=0; divLogin.size=wx-100; divLogin.speed=500; divLogin.filters[0].enabled=false; logined=true; setTimeout(loginMove,10); break; } }catch(e){return(false);} if(i<5){ setTimeout("showContent("+i+");",10); }else{ loginMove(); } } function createStar(){ var theIndex=stars.length; stars[theIndex]=document.createElement("DIV"); document.body.insertBefore(stars[theIndex]); setRandomAttributes(stars[theIndex]); setStyle(stars[theIndex]); } function moveStar(){ for(var i=0;i<stars.length;i++){ stars[i].z-=stars[i].speed; if(stars[i].z<1500)setRandomAttributes(stars[i]); setStyle(stars[i]); } } function startMoveStar(){ stopMoveStar(); starTimer=setInterval(moveStar,10); } function stopMoveStar(){ try{ clearInterval(starTimer); }catch(e){} } function d3d2(x,y,z,size,color){ var x=parseFloat(x); var y=parseFloat(y); var z=parseFloat(z); var size=parseFloat(size); var color=parseFloat(color); var percent=ds/(ds+z); x=parseInt(wx/2+x*percent); y=parseInt(hx/2+y*percent); size=parseInt(size*percent); color=parseInt(color*percent/2.5+153); return(x+":"+y+":"+size+":"+color); } function getColor(strC){ try{ var i=eval("0x"+strC.substring(1,3)); }catch(e){return(255);} return(i); } function setRandomAttributes(obj){ obj.size=parseInt(Math.random()*10)+10; obj.c=parseInt(Math.random()*45)+210; obj.x=(parseInt(Math.random()*500)+500)*(Math.random()>0.5?1:-1); obj.y=(parseInt(Math.random()*400)+400)*(Math.random()>0.5?1:-1); obj.speed=parseInt(Math.random()*120)+180; obj.z=parseInt(Math.random()*12000)+8000; } function setStyle(obj){ var tRe=d3d2(obj.x,obj.y,obj.z,obj.size,obj.c).split(":"); with(obj.style){ position="absolute"; left=tRe[0]; top=tRe[1]; if(parseInt(tRe[2])<=0){ display="none"; }else{ display=""; width=tRe[2]; height=tRe[2]; backgroundColor=toColor(tRe[3]); overflow="hidden"; } } } function toColor(intV){ var cc=[0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F"]; var intV=parseInt(intV); re=""+cc[parseInt(intV/16)]+cc[intV%16]; return("#"+re+re+re); } function shakeWin(i){ i=isNaN(i)?-1:parseInt(i); i++; try{ switch(i%7){ case 0:window.moveTo(3,3);break; case 1:window.moveTo(-3,3);break; case 2:window.moveTo(-3,-3);break; case 3:window.moveTo(3,-3);break; case 4:window.moveTo(-3,3);break; case 5:window.moveTo(3,3);break; case 6:window.moveTo(0,0);break; } }catch(e){return(false);} if(i<7){ setTimeout("shakeWin("+i+");",10); }else{ window.moveTo(0,0); if(!logined)startMoveStar(); } } </script> </head> <body onload="init();"> <div id=divLogin style="display:none;"> <form onsubmit="return(false);" style="display:none;"> <table> <tr><td colspan=2 align=center>Login</td></tr> <tr> <td><label>Name:</label></td> <td><input class=input0 value="Guest"></td> </tr> <tr> <td><label>Pass:</label></td> <td><input class=input0 type=password value="Guest"></td> </tr> <tr><td colspan=2 align=center> <input type=submit value="OK" class=input1 onclick="showContent();"> <input type=reset value="Cancel" class=input1> </td></tr> </table> </form> </div> <div id=divMain style="display:none;"> <iframe src="/" width="100%" height="100%"></iframe> </div> </body> </html>
所属频道:
层和布局特效
/
更新时间:2012-12-20
[收藏]
[报错]
[返回列表]
相关
层和布局特效
:
表格内容排序sortTable
行变成列,列变成行
文本输入限制
拆分单元格
控制表格内的滚动条
颜色交替的表格
JS计算里面有多少个
极酷的表格
会动的表格
可拖动单元格
变色表格
访问表格的每个TD
层和布局特效Rss订阅
特效代码搜索
层和布局特效推荐
超多用于AJAX的操作提示效果
JavaScript未知高度元素的垂直居中
未知图片高度的CSS水平、垂直居中
JS层展开,默认是折叠状态
JavaScript实现表格排序特效
一个JS+CSS布局的人气列表
简洁选项卡Tab,点击后对应背景也会切换
CSS层透明
CSS控制文字在一条线的中间
简单代码实现的跟随滚动条的滑动层
猜你也喜欢看这些
禁止别人使用 quot;另存为 quot;保存你的网页
自动弹出的导航窗
选色板
JS无刷新改变网页背景图片
精美js鼠标跟随代码
CSS给网页上的评论文本框加上提醒功能背景图片
推拉门式样的菜单(鼠标移上去即可,无需点击)
在一定时间内打开一个新的窗口
JavaScript点击图片无刷新切换背景
多项目选择脚本-按要求放
相关链接:
复制本页链接
|
搜索一个很牛的登录窗口特效
特效说明:
层和布局模板
-
一个很牛的登录窗口特效
。