遮罩层特效(根据鼠标进入离开方向出现) 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>遮罩层特效(根据鼠标进入离开方向出现)</title>
<script src="/Scripts/jquery-1.8.3.min.js"></script>

<script>
$(function(){
 var $li=$(".wrap>ul>li");
 $li.each(function(index, element) {
     var $this=$(this);
     var $cover=$this.find(".cover");

     $this.bind("mouseenter mouseleave",function(e){
        var w = $(this).width();
        var h = $(this).height();
        
        /* 判断移动方向direction有 0 1 2 3四个值代表4个方向 */
        var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
        var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

        /* e.pageX 是 鼠标坐标X  相对于整个页面的坐标*/
        /* e.pageY 是 鼠标坐标Y  相对于整个页面的坐标*/
        /* this.offsetLeft 是 当前元素与相对父集的左部距离*/
        /* this.offsetTop  是 当前元素与相对父集的上部距离*/

        var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
        var eventType = e.type;
        var dirName = new Array('上方','右侧','下方','左侧');
        var name=dirName[direction];
        if(eventType == 'mouseenter'){
            switch(name){
                case "上方": $cover.css({top:"-100%",left:0});break;
                case "右侧": $cover.css({left:"100%",top:0});break;
                case "下方": $cover.css({top:"100%",left:0});break;
                case "左侧": $cover.css({left:"-100%",top:0});break;
            }
            $cover.stop().animate({top:0,left:0},"slow");
        }else{
            switch(name){
                case "上方": $cover.stop().animate({top:"-100%",left:0},"fast");break;
                case "右侧": $cover.stop().animate({left:"100%",top:0},"fast");break;
                case "下方": $cover.stop().animate({top:"100%",left:0},"fast");break;
                case "左侧": $cover.stop().animate({left:"-100%",top:0},"fast");break;
            }
        }
    });
    })
})
</script>

<style>
.wrap {width:1120px;margin: 0 auto;position: relative;}
.wrap ul{
  padding:0;
  position: relative;
}
.wrap ul li{list-style:none;background: #d8d5d5;  position:relative;height: 191px;margin: 0 auto 30px;overflow: hidden; }
.wrap ul li .imgcover{ position:relative; overflow:hidden;}
.wrap ul li .imgcover .cover{z-index: 0; width:100%;height:100%; background:#be4242;opacity:.8; filter:alpha(opacity=80); position:absolute;}
.wrap ul li .imgcover .name{ font-size:30px; font-weight:bold;color:#fff;text-align:center; line-height: 191px;margin: 0;}
.cover_info{
  position: relative;
  z-index: 11;
}
</style>
</head>

<body>
<div class="wrap">
<ul>
    <li>
        <div class="imgcover">
            <div class="cover_info">
                <p class="name">Climber's Delight</p>
            </div>
            <div class="cover"></div>
        </div>
    </li>
    <li>
        <div class="imgcover">
            <div class="cover_info">
                <p class="name">Climber's Delight</p>
            </div>
            <div class="cover"></div>
        </div>
    </li>
    <li>
        <div class="imgcover">
            <div class="cover_info">
                <p class="name">Climber's Delight</p>
            </div>
            <div class="cover"></div>
        </div>
    </li>
    <li>
        <div class="imgcover">
            <div class="cover_info">
                <p class="name">Climber's Delight</p>
            </div>
            <div class="cover"></div>
        </div>
    </li>
    <li>
        <div class="imgcover">
            <div class="cover_info">
                <p class="name">Climber's Delight</p>
            </div>
            <div class="cover"></div>
        </div>
    </li>
</ul>
</div>
</body>
</html>

 

posted @ 2021-03-10 17:25  挥不去的执念  阅读(136)  评论(0)    收藏  举报