(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>

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

jQuery鼠标悬停的更多相关文章

  1. jQuery鼠标悬停内容动画切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery鼠标悬停3d菜单展开动画

    效果体验:http://hovertree.com/texiao/jquery/93/ 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单.采用jQuery和CSS3实现 ...

  3. 基于jQuery鼠标悬停上下滑动导航条

    基于jQuery鼠标悬停上下滑动导航条.这是一款蓝色好看的鼠标响应式网站导航菜单特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="menu2& ...

  4. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  5. jQuery鼠标悬停图片放大显示

    jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...

  6. jQuery鼠标悬停显示提示信息窗体

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery鼠标悬停事件hover()

    在JQuery中提供了.hover()事件,hover的第一个参数(匿名方法)表示mouseenter,第二个参数表示mouseleave,即表示可以为hover传递两个参数.如下代码所示: $( & ...

  8. 简单jquery 鼠标悬停提示效果

    记得自己引入jq插件哦~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. Jquery鼠标悬停按钮图标动态变化效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Java:使用DOM4j来实现读写XML文件中的属性和元素

    DOM4可以读取和添加XML文件的属性或者元素 读取属性: public static void ReadAttributes() throws DocumentException { File fi ...

  2. vue+SSM验证码实现

    源码:https://github.com/HannahLihui/StudentManager-SSM/tree/master/SSM-git/StudentManager-SSM-master 1 ...

  3. 深入浅出图解【计算机网络】 之 【TCP可靠传输的实现2: 超时重传+拥塞控制】

    [前言]上一篇文章介绍了关于TCP的基础知识,以及建立(释放)连接和滑动窗口的概念. 本篇文章将延续上一篇的思路,继续介绍TCP实现可靠传输的机制. 超时重传 上一篇文章里介绍过TCP采用停止等待协议 ...

  4. Https之SSL原理

    一.HTTPS和SSL HTTP(Hyper TEXT Transfer Protocol超文本传输协议)是目前互联网上应用最为广泛的一种网络协议,用于在Web浏览器和网站服务器之间传递信息,但是HT ...

  5. drupal7 hook_validate

    原文:function hook_validate function hook_validate($node, $form, &$form_state) { if (isset($node-& ...

  6. FineReport中如何用JavaScript解决控件值刷新不及时

    我们经常利用按钮进行一些页面值的处理工作,但是默认的逻辑造成,每次新填报的值,需要点击下空白区域或是执行某个其他操作才可以被正确读取,那么我们如何处理呢? 例:当我们用常规取值的时候,虽然B3单元格录 ...

  7. 树莓派发射FM波——搭建私人小电台

    树莓派的应用十分广泛,有很多奇思妙想的应用非常有趣,在这里我们想实现一个小电台的功能,但是在这里需要说明,私人架设电台是违法行为,所以本案只作为自我娱乐所用,不能发射大功率的信号干扰正常的FM频段. ...

  8. Axure响应式进阶

    Axure响应式进阶 2018年6月2日luodonggan 随大屏幕分辨率普及,网页设计在交互阶段就必须考虑响应式方案,Axure7作为我偏爱的交互设计工具果然也没让大家失望的新增了Adaptive ...

  9. SQLSERVER中KeyHashValue的作用（下）

    SQLSERVER中KeyHashValue的作用(下) 昨天中午跟高文佳童鞋讨论了KeyHashValue的作用,到最后还是没有讨论出结果 昨天晚上德国的兄弟傅文伟做了一下实验,将实验结果交给我 感 ...

  10. python基础_特殊符号

    #\n 回车符 #\r 换行符 #\s 空格 #\t tab符号,不知道?开个txt文本,然后按电脑的tab键,就是caps lock上面那个,卧槽,看到一个大长空格(也可能是个超短空格),这个就是t ...