3.根据鼠标方向移入移出

这可能是比较常用的一个效果了。

效果预览:https://codepen.io/andy-js/pen/RwNjppZ

直接看代码:主要看注释

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>andy-js:根据鼠标方向移入移出</title>
<style>
*{margin:0; padding:0;}
#box{ width:200px; height:200px; position:relative; top:0; left:0; margin:100px auto; background:#ccc; overflow: hidden;}
#box span{width:100%; height:100%; position:absolute; top:0; left:-200px; background:rgba(255,0,0,1);}
</style>


</head>

<body>.

<div id="box"><span></span></div>

<script>
   
   
    var oBox=document.getElementById('box');
    var oS = oBox.children[0];
    oBox.onmouseover=function(ev){
        var oEvent = ev||event;
        var oForm = oEvent.formElement||oEvent.relatedTarget;
        if(this.contains(oForm))return;   //判断如果当前触发事件的元素不是box本身则忽略
        var dir = direction(this,oEvent);
       
        oS.style.transition='0s all ease';
        switch(dir){
            case 2:
                //右
                oS.style.left = '200px';
                oS.style.top = 0;
                break;
            case 1:
                //下
                oS.style.left = 0;
                oS.style.top = '200px';
                break;
            case 0:
                //左
                oS.style.left = '-200px';
                oS.style.top = 0;
                break;
            case 3:
                //上
                oS.style.left = 0;
                oS.style.top = '-200px';
                break;
        }
        getTo({top:0,left:0});
    };
    oBox.onmouseout=function(ev){
        
        var oEvent = ev||event;
        var oTo = oEvent.toElement||oEvent.relatedTarget;
        if(this.contains(oTo))return;
        var dir = direction(this,oEvent);
        
        switch(dir){
            case 2:
                //右
                getTo({left:200,top:0});
                break;
            case 1:
                //下
                getTo({left:0,top:200});
                break;
            case 0:
                //左
                getTo({left:-200,top:0});
                break;
            case 3:
                //上
                getTo({left:0,top:-200});
                break;
        }
    };

    function a2d(n){
        return n*180/Math.PI;
    };                                             
    function direction(obj,ev){
        var w = obj.offsetWidth;
        var h = obj.offsetHeight;
        var x = ev.clientX-(obj.offsetLeft+w/2);
        var y = (obj.offsetTop+h/2)-ev.clientY;
        return Math.round((a2d(Math.atan2(y,x))+180)/90)%4;

        /*       
        Math.atan2
        atan2() 方法可返回从 x 轴到点 (x,y) 之间的角度。弧度
        语法  Math.atan2(y,x)

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

        Math.atan2(y,x)   得到0-180    0-负180
        所以先加上180得到正的  
        Math.atan2(y,x) +180

        之前是  -180-180之间的值    都加上180以后
        能得到  0-360 之间的值

        每个值之间相隔90   所  用值/90     可能除不尽所以四舍五入    再最后%4  因为分成4份
        */

    };
    var timer;
    function getTo(o){
       clearTimeout(timer);
       timer=setTimeout(function(){
            oS.style.transition='0.4s all ease';
            oS.style.left=o.left+'px';
            oS.style.top=o.top+'px';
       },100);
       /*
       因为这里动画偷懒没有引入其它的动画库,所以为了避免一些问题,用了setTimeout
       */
    };
</script>
</body>
</html>




Image placeholder
andy
未设置
  15人点赞

没有讨论,发表一下自己的看法吧

推荐文章
干了5年程序员,该如何转行?5个新工作方向了解一下

大数据文摘出品来源:Medium编译:灿灿、曹培信写了5年代码,年龄已近30,头发尚存几缕,除了写代码其他并无所长,职业未来在何方?对于从毕业就进入互联网公司,已经工作了5年甚至更久的程序员来说,现在

指引趋势与方向!2019开发者调查报告出炉

近日国外开发者平台HankerRank发布了2019年开发者技能调查报告,该报告根据对71,281位开发者的调查得出。作者从中选取了一部分,给大家解读一下。12018年最受欢迎的开发语言经过调查,2

NeurIPS 2019公布获奖论文!新增杰出新方向奖项,微软华裔研究员斩获经典论文

大数据文摘出品备受瞩目的NeurlPS2019周日一早在温哥华拉开序幕,今天,组委会通过一篇博客公布了包括杰出论文奖、杰出新方向论文奖等五大类奖项。NeurIPS,全称神经信息处理系统大会(Confe

jquery怎么确定滚动事件的方向?

在jQuery中可以使用scrollTop()方法来确定滚动事件的方向,scrollTop()方法用于设置或返回所选元素的垂直滚动条位置。利用这种方法,我们就可以确定滚动方向。下面通过示例来具体看看。

新突破!人工智能会根据你的声音来预测你的长相

麻省理工学院的研究人员发明了一种新的人工智能,它实现了一项惊人的成就:仅通过分析一个人声音的短片段,它就能重建他们在现实生活中的样子。人工智能的预测结果并不完美,但总的来说还是相当不错的,这项研究也是