(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. DDD Quickly - 读书笔记

    读后感:关于领域驱动设计,过去多多少少用到一些.所以,这本精简版看起来很快,很多概念很熟悉,它帮助我把散乱的知识串起来.最后,Eric Evans谈到一点,本来软件的发展是向着处理复杂的业务逻辑走的, ...

  2. DotNetBar的使用—（界面风格）

    C# WinForm项目中自带的窗体风格很普通,一点都不美观.DotNetBar就是一套.NET美化控件库,有70几个控件以及多种界面的皮肤风格.关于控件的效果在官网上进行查看http://www.d ...

  3. scss-函数

    在scss中除了可以定义变量,具有@extend和@mixins等特性之外,还自备了一系列的函数功能. scss本身带有大量的内置函数,具体可以参阅官网函数模块. 一.字符串函数 unquote($s ...

  4. js二分查找树实现

    function BinaryTree() { var Node = function(key) { this.key = key; this.left = null; this.right = nu ...

  5. OpenGL学习--开发环境

    1. VS2017 Professional安装 1.1. 下载 mu_visual_studio_professional_2017_x86_x64_10049787.exe 1.2. 双击开始安装 ...

  6. Ubuntu中网络配置interfaces与界面网络配置NetworkManager

    [Server版本] 在Ubuntu Server版本中,因为只存有命令行模式,所以要想进行网络参数设置,只能通过修改 /etc/network/interfaces .具体设置方法如下: (1) U ...

  7. flutter开发中常用的dart插件

    flutter插件官网地址:https://pub.dartlang.org/packages/ 1. image_picker 一个可以从图库选择图片,并可以用相机拍摄新照片的flutter插件 2 ...

  8. 如何从 GitHub 上下载单个文件夹

    DownGit 好用记得回来点赞(建议***)

  9. mysql 5.7数据库支持emoji符号但是程序总算报错Incorrect string value: '\xF0\x9F\x98\x84\xF0\x9F...' for column ...

    1.线上碰到个问题,端上切换搜狗输入法后,原来限制的表情符号还能输入.数据库使用的是5.7.22版本的,刚开始以为数据库不支持表情符号导致的,但是看了线上的数据库以及字段,都是支持的. show va ...

  10. 第三届移动互联网测试开发大会 PPT合集下载

    PPT下载地址 http://www.51test.space/archives/2887 大会介绍 Mobile Testing Summit China(中国移动互联网测试开发大会)是一个以移动测 ...