模仿Windows飞行视窗的登陆框

<html>
    <head>
    <title>模仿Windows飞行视窗的登陆框丨</title>
    <style>
    body {
    padding:0px;
    margin:0px;
    background-Color:black;
    border-width:0px;
    font-size:12px;
    color:#DDD;
    overflow:hidden;
    }
    #divLogin {
    padding:30px;
    background-Color:#E9FFF0;
    color:navy;
    filter:alpha(opacity=50);
    z-Index:90;
    text-align:center;
    }
    #divLogin td{
    color:#555;
    }
    .input0 {
    border:#000 1px solid;
    width:160px;
    height:20px;
    color:navy;
    }
    .input1 {
    border:#000 1px solid;
    width:80px;
    height:20px;
    background-Color:transparent;
    color:navy;
    padding-top:2px;
    }
    </style>
    <script>
    //This program is written by Hutia.
    //****Instructions*******
    //  All the length are in the unit "px"
    //  That‘s all.
    //***********************
    wx=wxx=screen.availWidth;
    hx=hxx=screen.availHeight;
    ds=1800;//ds is the distance between user and the screen.
    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=3000;
    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=2000;
    divLogin.filters[0].enabled=false;
    logined=true;
    setTimeout(loginMove,10);
    break;
    }
    }catch(e){return(false);}
    if(i<5){
    setTimeout("showContent("+i+");",10);
    }else{
    loginMove();
    }
    }
    //***Star functions********
    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){}
    }
    //****Private functions******
    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;">
    <h3>CsrCode-芯晴网页特效</h3>
    <b><a href="http://www.sjzyiqu.com/">河北幼儿园塑胶地板</a>丨<a href="http://www.langqiaohome.com">kiddy官网</a>丨<a href="http://www.shuaikangyiye.com/"></a>丨<a href="http://www.kiddyi.com"></a>丨</b> - <br>
    </div>
    </body>
    </html>
    <br><br><hr>
    
时间: 2024-08-25 18:08:20

模仿Windows飞行视窗的登陆框的相关文章

关于e.preventDefault() 阻止默认行为 对登陆框限制输入的解决方法

当登陆框div内的length 为0时,执行e.preventDefault() //删除左后空格 function trim(str){ return str.replace(/(^\s*)|(\s*$)/g,''); } if (trim(this.innerHTML).length==0) e.preventDefault(); //div内长度0时候 执行阻止默认行为,否则不执行

Android的弹出登陆框的实现

最近在做一个项目,要用到登陆框,几经波折,最后用的是直接将Activity的Theme属性设置成Dialog,然后达到了我想要的效果. 下面是我的实现经历: 1.首先,我是直接使用AlertDialog来实现,确定是,形状有点难看,而且获得Dialog里面的控件略显麻烦(因为我要做的登陆框有一定的布局),然后就给我就放弃了,可能因为我太水了,不能很好的使用它 2.然后我就使用PopupWindow来实现,界面是达到了我的要求,控件的获得通过Inflater就可以获得了相对较简单,但是有一个缺点就

页面登陆框老是乱乱的?banner跨页图片缩小之后总是在側面不能显示主要部分?哈哈~我来帮你忙~~

有banner背景图片和登陆框的html.css排布 目的:无论页面大小,背景图片都要居中(显示图片中间主要内容,而不是側面的一些东西),登陆框基本能在页面内显示. 盒子的排列应该是这种: <div id="index-banner-background"> <!--用来放背景图片以及设置内容--> <div id="index-logbox">                <!--做一个大盒子,用来盛放登陆框-->

golang编译的程序在windows下不显示黑框

如题,一个编译参数,备忘: -ldflags="-H windowsgui" 别的平台不适用 golang编译的程序在windows下不显示黑框,布布扣,bubuko.com

javascript实现弹出登陆框效果

先来看看效果吧 初始情况下 2.点击登陆按钮  3.点击close按钮,或者单击灰色区域后,登陆窗口会消失. html结构 <body> <span class="btn" id="BTN">login</span> </body> css样式 *{ margin: 0; padding: 0; } .btn{ position: absolute; top: 50px; right: 100px; display:

基于jQuery鼠标点击弹出登陆框效果

基于jQuery鼠标点击弹出登陆框效果.这是一款扁平样式风格的jQuery弹出层登陆框特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <input type="button" class="one" value="点击我查看效果" /> <div class="box"> <div class="box2"> <div class=&quo

(6)C# 之 ADO.NET 登陆框详解

几乎学习到任何一种编程语言,登陆框案列都是必不可少的,那么今天我也来写一篇登陆框案例详解. ①首先是建立数据库表,如下图 ◇说明:errortimes这个字段,主要作用在于每次用户输入错误之后,errortimes就会自增1,当errortimes达到3的时候,该账户就会被锁定.如果用户在errortimes达到3之前成功登陆了,那么errortimes值就会清. ②然后新建一个WPF窗口,如下图 ③双击“登陆按钮”,开始写代码,具体代码如下: 1 if (username.Text.Lengt

【转载】HTML+CSS 模仿Windows 7 桌面效果

前一阵在园子里看到一篇文章<使用css3仿造window7的开始菜单>,文中仅使用CSS3 实现了Windows 7 开始菜单的动态效果,很久以来一直被WPF/Silverlight 山上的风景所吸引,未成想其他的山也同样引人入胜.于是心血来潮也尝试着做了一个Windows 7 桌面效果,先来看几张截图吧. 桌面程序鼠标Hover 效果: 任务栏程序鼠标Hover 效果: 开始菜单效果: 桌面程序图标 桌面背景及程序图标的结构如下: <div id="win">

第三 课 简易登陆框

一.效果图 二.. 三.源码 <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="关键词"> <meta name="description" content="描述"> <title>登陆框</titl