用JQ判断鼠标移入DIV的方向，并从该方向移出遮罩

一个比较有意思的特效

<--html部分代码-->

<div class="wrap" >

    <ul class="list" id='list'>

        <li><img src='images/1.gif'/><div>图片一</div></li>

        <li><img src='images/2.jpg'/><div>图片二</div></li>

        <li><img src='images/3.jpg'/><div>图片三</div></li>

        <li><img src='images/4.png'/><div>图片四</div></li>

        <li><img src='images/5.jpg'/><div>图片五</div></li>

        <li><img src='images/6.png'/><div>图片六</div></li>

        <li><img src='images/7.png'/><div>图片七</div></li>

        <li><img src='images/8.jpg'/><div>图片八</div></li>

        <li><img src='images/9.jpg'/><div>图片九</div></li>

        <li><img src='images/10.jpg'/><div>图片十</div></li>

        <li><img src='images/7.png'/><div>图片七</div></li>

        <li><img src='images/8.jpg'/><div>图片八</div></li>

    </ul>

</div>

<--CSS部分代码-->

<--

body,ul,li,img{margin: 0;padding: 0}

body{background: #f8f8f8}

.wrap{width: 720px;margin: 30px auto;padding: 10px;}

.list{float: left;height: auto;background: #fff;border: 1px solid #ccc;width: 100%}

.list li{cursor: pointer;margin:10px;position: relative;list-style-type: none;float: left;overflow: hidden;}

.list li img{float: left;}

.list li div{position: absolute;background:#F2528E;opacity: 0.8;filter:alpha(opacity:80);color:#fff;font-size:28px;text-align:center;line-height:150px;top:150px }

.list img,.list div{height: 150px;width: 220px;}

-->

<--JS部分代码-->

<script src='./jquery-1.8.js'></script>  //引入JQ

 

    <script>

var timer = null;

$('li').mouseenter(function(e) {

　　var oDiv = $(this).find('div');

       oDiv.css({left: 0, top: 0});

　　var iDirection = mousemovedirection(this, e);

　　switch(iDirection) {

　　　　case 0 : oDiv.css('top', '-150px'); break;

　　　　case 1:  oDiv.css('left', '220px'); break;

　　　　case 2: oDiv.css('top', '150px'); break;

　　　　default: oDiv.css('left', '-220px')

        }

        timer = setTimeout(function() {

                oDiv.animate({left: 0, top: 0}, 200)

        }, 100)

        }).mouseleave(function(e) {

            clearTimeout(timer);

　　　  var oDiv = $(this).find('div');

  　　　var iDirection = mousemovedirection(this, e);

　　　  switch(iDirection) {

　　　　　　case 0 : oDiv.animate({top: -150}, 200); break;

　　　　　　case 1: oDiv.animate({left: 220}, 200); break;

　　　　　　case 2: oDiv.animate({top: 150}, 200); break;

　　　　　　default: oDiv.animate({left: -220}, 200)

            }

        });

function mousemovedirection(o, e) {    //这里是判断鼠标移入方向的方法，返回的数字可能是0, 1, 2, 3 分别对应表示的是 上, 右, 下, 左这几个方向。

1. 　　var w = o.offsetWidth;
2. 　　var h = o.offsetHeight;
3. 　　var x = (e.pageX - o.offsetLeft - (w/2)) * (w > h ? (h/w) : 1);
4. 　　var y = (e.pageY - o.offsetTop - (h/2)) * (h > w ? (w/h) : 1);
5. 　　var direction = Math.round((((Math.atan2(y, x) * (180/Math.PI)) + 180) / 90) + 3) % 4;
6. 　　var evenType = e.type;
7. 　　return direction;

        }

</script>

转载于:https://www.cnblogs.com/lee319/p/7097386.html