美文网首页
很有意思的穿墙原生js的封装

很有意思的穿墙原生js的封装

作者: 飘飞而过学 | 来源:发表于2016-12-10 11:00 被阅读0次

    functiongetDir(obj,ev){

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

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

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

    //*180/Math.PI    角度转弧度

    //+180              变成360

    // /90          求数字 0 - 4之间

    //Math.round      四舍五入后有五个值 0 1 2 3 4

    // %4         为的结果 的到 0 1 2 3

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

    }

    functionthrough(obj){

    varoLi=obj.children[0];

    obj.onmouseenter=function(ev){

    varoEvent=ev||event;

    vardir=getDir(obj,oEvent);

    switch(dir){

    case0:

    oLi.style.left='200px';

    oLi.style.top=0;

    break;

    case1:

    oLi.style.left=0;

    oLi.style.top='200px';

    break;

    case2:

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

    oLi.style.top=0;

    break;

    case3:

    oLi.style.left=0;

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

    break;

    }

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

    };

    obj.onmouseleave=function(ev){

    varoEvent=ev||event;

    vardir=getDir(obj,oEvent);

    switch(dir){

    case0:

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

    break;

    case1:

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

    break;

    case2:

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

    break;

    case3:

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

    break;

    }

    };

    }

    window.onload=function(){

    varaUl=document.getElementsByTagName('ul');

    for(vari=0;i

    through(aUl[i]);

    }

    };

    相关文章

      网友评论

          本文标题:很有意思的穿墙原生js的封装

          本文链接:https://www.haomeiwen.com/subject/lircmttx.html