(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. CRC算法

    https://blog.csdn.net/dream_1996/article/details/73588269

  2. python可变对象与不可变对象

    可变/不可变对象定义 不可变对象 该对象所指向的内存中的值不能被改变.当改变某个变量时候,由于其所指的值不能被改变,相当于把原来的值复制一份后再改变,这会开辟一个新的地址,变量再指向这个新的地址. 可 ...

  3. EF 调用oracle 存储过程

    EF是如何调用的存储过程的,本人也是翻遍了个大网站,查阅了很多资料.终于解决了遇到的问题. 第一步:创建存储过程,在这里我就不多说了,不是文章说的重点. declare O_VOUCHER_ACT_D ...

  4. HTML的代码规范

    一.语法 用两个空格来代替制表符(tab) 2.嵌套元素应当缩进一次(即两个空格). 3.对于属性的定义,确保全部使用双引号,绝不要使用单引号. 4.不要省略可选的结束标签(例如,</li> ...

  5. redux、immutablejs和mobx性能对比（一）

    一.前言 关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这里 ...

  6. 百万级数据 MySQL处理（转）

    转自 http://www.cnblogs.com/win7xt/p/3156334.html 使用MySQL处理百万级以上数据时,不得不知道的几个常识   最近一段时间参与的项目要操作百万级数据量的 ...

  7. Android中Handler的使用

    当我们在处理下载或是其他需要长时间执行的任务时,如果直接把处理函数放Activity的OnCreate或是OnStart中,会导致执行过程中整个Activity无响应,如果时间过长,程序还会挂掉.Ha ...

  8. JVM知识（一）：基础原理

    学过java知识和技术人,都应该听说过jvm,jvm一直是java知识里面晋级阶段的重要部分,如果想要在java技术领域更深入一步,jvm是必须需要明白的知识点. 本篇来讲解jvm的基础原理,先来熟悉 ...

  9. Datastage重启服务

    使用DS开发job时,偶尔一个Job出现卡死现象,导致工作不能进展下去,有时候需要重启datastage服务才可以. DataStage在正常运行时候有以下两个主要的进程: (1)dsrpcd(DS的 ...

  10. RedHat 安装YUM软件

    最近在虚拟机里搭建RedHat Enterprise Linux 6.0 X86_64位系统,在此机器上安装了Oracle11g数据库.其中在安装软件的时候,一般都是用的是RPM命令,但是有些软件包有 ...