(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. Executor、ExecutorService、ThreadPoolExecutor

    1.Executor Executor接口中中只有一个方法 执行已提交的Runnable任务对象. ExecutorService pool1 = Executors.newFixedThreadPo ...

  2. win10 安装oracle 11gR2_database（内附下载地址）

    前言:想要为了后续开展项目做准备,而且打算使用oracle,所以必须先安装oracle.本机 win 10 64位系统. 第一步,下载 oracle 下载地址,官网(需要登录注册): http://d ...

  3. mysqli 更新&插入操作及事务

    $mysqli = new mysqli('localhost', 'root', '1234', 'shop'); $query1 = " update sw_goods set good ...

  4. CVE-2017-11882钓鱼样本构造

    前言 漏洞详情: https://embedi.com/blog/skeleton-closet-ms-office-vulnerability-you-didnt-know-about 最近的一个影 ...

  5. 润乾V4的最小化部署方式

     在接触到的很多项目实际应用中,部署润乾V4都是使用润乾V4设计器自带的WEB发布向导,直接生成webRoot目录,然后将该目录下的所有文件COPY到项目目录下,然后修改web.xml文件和rep ...

  6. doPost方法不支持 a 标签和地址栏直接输入地址访问

    demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  7. 配置hive使用mysql存储metadata metadatastore

        hive默认使用derby数据库保存元数据,derby数据库比较小众,并且一次只能打开一个会话,一般修改为mysql数据库. 1.修改conf/hive-site.xml配置项: <pr ...

  8. 浅谈 java 反射机制

    一:Java反射概念 Java反射是Java被视为动态(或准动态)语言的一个关键性质.这个机制允许程序在运行时透过Reflection APIs取得任何一个已知名称的class的内部信息,包括其mod ...

  9. web开发中的MVC框架与django框架的MTV模式

    1.MVC 有一种程序设计模式叫MVC,核心思想:分层,解耦,分离了 数据处理 和 界面显示 的代码,使得一方代码修改了不会影响到另外一方,提高了程序的可扩展性和可维护性. MVC的全拼为Model- ...

  10. Linux pyenv环境安装

    python工作环境管理 pyenv安装: git clone https://github.com/pyenv/pyenv ~/.pyenv echo 'export PYENV_ROOT=&quo ...