jQuery鼠标悬停 

(function ($) {
    $.fn.hoverdir = function(options){
        var options = $.extend({
            choice : ".cove"
        },options);
        return this.each(function(){
            var self = $(this);
            self.hover(function(e){
                mouseMove(e,self,true);
            },function(e){
                mouseMove(e,self,false);
            });
            function mouseMove(e,element,bool){    //光标、元素、布尔
                var top    = element.offset().top;   //元素top距离浏览器顶部距离
                var bottom = top + element.height(); //元素bottom距离浏览器顶部距离
                var left   = element.offset().left;  //元素left距离浏览器左边距离
                var right  = left + element.width(); //元素right距离浏览器左边距离
                var x      = e.pageX;                //光标当前横向x位置
                var y      = e.pageY;                //光标当前纵向y位置
                //光标当前横纵向位置减去元素各方位距离(取最小值) = 将要显示的方向
                var sT = Math.abs(y - top);
                var sB = Math.abs(y - bottom);
                var sL = Math.abs(x - left);
                var sR = Math.abs(x - right);
                var current = Math.min(sT,sB,sL,sR);         //取元素最小值从而进行switch排除
                var choices  = element.find(options.choice); //获取需要选择的元素
                switch (current){
                  case sT:
                      if(bool){
                          choices.css({left:0,top:'-100%'}).animate({top:0},200);
                        }else{
                            choices.stop(1,1).animate({top:'-100%'},200);
                        }
                        break;
                    case sB:
                        if(bool){
                            choices.css({left:0,top:'100%'}).animate({top:0},200);                            
                        }else{
                            choices.stop(1,1).animate({top:'100%'},200);    
                        }
                        break;
                    case sL:
                        if(bool){
                            choices.css({left:'-100%',top:0}).animate({left:0},200);                            
                        }else{
                            choices.stop(1,1).animate({left:'-100%'},200);    
                        }
                        break;
                    case sR:
                        if (bool){
                            choices.css({left:'100%',top:0}).animate({left:0},200);                            
                        }else{
                            choices.stop(1,1).animate({left:'100%'},200);    
                        }
                        break;
                }
            }
        });
    }
})(jQuery);
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{ background-color:#2A2A2A;}
            li{list-style: none;}
            #wrap{width: 800px;margin:100px auto;}
            #wrap ul li{float: left;margin: 5px;width: 230px;height: 360px;position: relative;overflow: hidden;}
            #wrap ul li .cove{width: 230px;height: 220px;position: absolute;background: url(img/new-bg.png);padding: 140px 0 0 0;top: 100%;left: 100%;}
            #wrap ul li .cove p{font-size: 14px;color:#fff;text-align: center;}
        </style>
    </head>
    <body>
    <div id="wrap">
        <ul>
            <li>
                <img src="img/1.png" />
                    <div class="cove">
                        <p>pci1</p>
                        <p>Picture info 1</p>
                    </div>
            </li>
            <li>
                <img src="img/2.png" />
                    <div class="cove">
                        <p>pci2</p>
                        <p>Picture info 2</p>
                    </div>
            </li>
            <li>
                <img src="img/3.png" />
                    <div class="cove">
                        <p>pci3</p>
                        <p>Picture info 3</p>
                    </div>
            </li>
            <li>
                <img src="img/4.png" />
                    <div class="cove">
                        <p>pci4</p>
                        <p>Picture info 4</p>
                    </div>
            </li>
            <li>
                <img src="img/5.png" />
                    <div class="cove">
                        <p>pci5</p>
                        <p>Picture info 5</p>
                    </div>
            </li>
      <li>
                <img src="img/6.png" />
                    <div class="cove">
                        <p>pci6</p>
                        <p>Picture info 6</p>
                    </div>
            </li>
        </ul>
    </div>
    <script src="../jquery.min.js"></script>
    <script src="hoverdir.js"></script>
    <script>
        $("#wrap ul li").hoverdir();
    </script>
    </body>
</html>

不多说，可以通过需求拓展功能。

posted on 2017-11-29 14:30  薛伟杰  阅读(406)  评论(0)  编辑  收藏  举报

导航