遮罩层随鼠标方向显示隐藏

效果如下：

遮罩层随鼠标方向显示隐藏

思路：

　　给标签绑定监听事件mouseenter和mouseleave，

　　以标签中心点为圆心，

　　获取标签右上角到圆心的角度：当鼠标进入时通过标签的clientWidth/2和clientHeight/2的对比使用Math.atan获取到弧度再换算成角度(弧度/180*Math.PI),

　　获取鼠标到圆心的角度：当鼠标进入或离开时通过目标事件event的offseX和offseY的对比使用Math.atan获取到弧度再换算成角度，

　　当鼠标的角度在(-右上角的角度)和(右上角的角度)之间时，判断鼠标位置的offseY>标签的高度/2则方向为下，否则方向为上，

　　当鼠标的角度小于(-右上角的角度)或大于(右上角的角度)时，判断鼠标位置的offseX>标签的宽度/2则方向为右，否则方向为左，

　　再通过animate执行遮罩层进入和离开的动画

　　调用之前需把遮罩层标签的样式写好(left设为100%或top值设为100%),调用时需传入遮罩层标签的选择器名

示例代码：

　　CSS：

ul{overflow:hidden;max-width:1024px;margin:auto;}
ul li{box-sizing:border-box; position:relative; float:left; overflow:hidden; padding:15px; list-style: none; width: 33.3%; height:300px;}
ul li .content{position:relative; overflow:hidden; box-sizing:border-box; height:100%;}
ul li img{width:100%; height:100%;}
ul li .shade{position:absolute; top:0; left:100%; width:100%; height:100%; background:rgba(0,0,0,.3); color:red;}

　　HTML：

　　　　<ul>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/863/b01/863b0144785ad8b1defb09d816f98062/fod-278001.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/2db/29f/2db29f75de82c56d2bad8dd52f0a22da/fod-398259.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/cb9/779/cb97790ca6c4110b7a9040ee05467804/fod-445054.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/80d/729/80d72961fb16c6704d6c9d2c3ffd3686/fod-455932.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/0cd/5b1/0cd5b1c2f12febcb2df5496833b95a92/fod-282284.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
            <li>
                <div class="content">
                    <img src="http://mpic.tiankong.com/ab8/705/ab870509e2af2aa37a674b15700f5b45/fod-264641.jpg@300h">
                    <div class="shade">详情信息。。。</div>
                </div>
            </li>
        </ul>
　　　　<script ></script>

　　JS:

;(function($){
    $.fn.moveShade = function(options){
        var anglePoint,w,h;
        this.each(function(){
            var $shade = $(options,$(this));
            this.addEventListener('mouseenter',function(e){
                w = this.clientWidth/2;
                h = this.clientHeight/2;
                anglePoint = Math.atan(w / h) * 180 /Math.PI;
                var direct = getDirection(e || event);
                switch (direct) {
                    case 'down': 
                        $shade.css({left: '0px', top: '100%'}).stop(true, true).animate({top: '0px'}, 'fast');
                        break;
                    case 'up':
                        $shade.css({left: '0px', top: '-100%'}).stop(true, true).animate({top: '0px'}, 'fast')
                            break;
                    case 'right':
                        $shade.css({left: '100%', top: '0px'}).stop(true, true).animate({left: '0px'}, 'fast');
                        break;
                    case 'left':
                        $shade.css({left: '-100%', top: '0px'}).stop(true, true).animate({left: '0px'}, 'fast')
                            break;
                }
            })
                this.addEventListener('mouseleave',function(e){
                    var direct = getDirection(e || event);
                    switch (direct) {
                        case 'down':
                            $shade.stop(true, true).animate({top: '100%'}, 'fast');
                            break;
                        case 'up':
                            $shade.stop(true, true).animate({top: '-100%'}, 'fast')
                                break;
                            case 'right':
                                $shade.stop(true, true).animate({left: '100%'}, 'fast');
                                break;
                            case 'left':
                                $shade.stop(true, true).animate({left: '-100%'}, 'fast');
                                break;
                        }
                    })
                });
                var getDirection = function (event) {
                    var direct,
                            x = event.offsetX,
                            y = event.offsetY,
                            angle = Math.atan((x - w) /- (y - h)) * 180 / Math.PI;
                    if(angle <= anglePoint && angle >= -anglePoint){
                        if(y > h){
                            direct = 'down';
                        }else{
                            direct = 'up';
                        }
                    }else if(x > w){
                        direct = 'right';
                    }else{
                        direct = 'left';
                    }
                    return direct;
                }
                        return this;
            }
})(jQuery)
//调用方式
$('ul li .content').moveShade('.shade');

在线演示：http://sandbox.runjs.cn/show/ykkza2mi

遮罩层随鼠标方向显示隐藏

相关推荐