仿Windows飞行视窗超酷效果的登陆框

稿源：互联网 2022-06-13 02:11:59 点击： 2077 撤稿纠错

类似Windows屏保界面，飞行视窗超酷效果，很有个性登陆框

以下讨论的是和Windows式登陆框相关的仿Windows飞行视窗超酷效果的登陆框教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<html>
<head>
<title>阿里西西Web开发,www.alixixi.com网页特效</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=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();
    }
}
//***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>阿里西西Web开发网页特效</h3>
        <b>阿里西西</b> - http://www.alixixi.com<br>
        
    </div>
</body>
</html>
<a href="http://js.alixixi.com/">欢迎访问阿里西西网页特效代码站，js.alixixi.com</a>

关于仿Windows飞行视窗超酷效果的登陆框的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/200809294165.shtml方便下次再访问哦。

·上一篇： 将左侧文本框复制到右侧文本框
·下一篇： 输入框提示文字点击时消失网页特效

仿Windows飞行视窗超酷效果的登陆框

文章分类LIST >>返回首页

最新游戏

最新新闻