js穿墻效果

<style>

*{ margin:0; padding:0; list-style:none;}

ul{ width:200px; height:200px; background:#ccc; float:left; position:relative; overflow:hidden; margin:10px; }

li{ position:absolute; left:0; top:-200px; width:200px; height:200px; background:#6cf; }

</style>

<script src="move.js"></script>
框架代碼 ：
                  function getStyle(obj,sName){
    return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
    options=options||{};
    options.duration=options.duration||700;
    options.easing=options.easing||'ease-out';
    
    var start={};
    var dis={};
    for(var name in json){
        start[name]=parseFloat(getStyle(obj,name));
        if(isNaN(start[name])){
            start[name]=1;
        };
        
        dis[name]=json[name]-start[name];
    }
    var count=Math.floor(options.duration/30);
    var n=0;
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        n++;
        for(var name in json){
            switch(options.easing){
                case 'linear':
                    var cur=start[name]+dis[name]*n/count;
                    break;
                case 'ease-in':
                    var cur=start[name]+dis[name]*Math.pow(n/count,3);
                    break;
                case 'ease-out':
                    var cur=start[name]+dis[name]*(1-Math.pow(1-n/count,3));
                    break;
            }
            if(name=='opacity'){
                obj.style.opacity=cur;
                obj.style.filter='alpha(opacity:'+cur*100+')';
            }else{
                obj.style[name]=cur+'px';
            }
        }
        if(n==count){
            clearInterval(obj.timer);
            options.complete&&options.complete();
        }
    },30);
}








<script>

function getDir(obj,ev){

var x=obj.offsetLeft+obj.offsetWidth/2-ev.clientX;

var y=obj.offsetTop+obj.offsetHeight/2-ev.clientY;

//Math.atan2(y,x)   角度

//*180/Math.PI      角度轉(zhuǎn)弧度

//+180              變成360

// /90              求數(shù)字 0 - 4之間

//Math.round        四舍五入 0 1 2 3 4

// %4               結(jié)果 0 1 2 3

return Math.round((Math.atan2(y,x)*180/Math.PI+180)/90)%4;

}

function through(obj){

var oLi=obj.children[0];

obj.onmouseenter=function (ev){

var oEvent=ev||event;

var dir=getDir(obj,oEvent);

switch(dir){

case 0:

oLi.style.left='200px';

oLi.style.top=0;

break;

case 1:

oLi.style.left=0;

oLi.style.top='200px';

break;

case 2:

oLi.style.left='-200px';

oLi.style.top=0;

break;

case 3:

oLi.style.left=0;

oLi.style.top='-200px';

break;

}

move(oLi,{left:0,top:0});

};

obj.onmouseleave=function (ev){

var oEvent=ev||event;

var dir=getDir(obj,oEvent);

switch(dir){

case 0:

move(oLi,{left:200,top:0});

break;

case 1:

move(oLi,{left:0,top:200});

break;

case 2:

move(oLi,{left:-200,top:0});

break;

case 3:

move(oLi,{left:0,top:-200});

break;

}

};

}

window.onload=function (){

var aUl=document.getElementsByTagName('ul');

for(var i=0; i<aUl.length; i++){

through(aUl[i]);

}

};

</script>

</head>

<body>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>

<ul>

<li></li>

</ul>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容