(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. zookeeper 选举

    选举概述: 1.启动时期的选举 所有的服务器状态为 LOOKING. 1.1.每个Server 会投出一票(投票规则为:SID.ZXID ,即 服务器ID 和 最大事务ID). 1.2.处理选票 (A ...

  2. FZU2150(KB1-I)

    Fire Game Accept: 1955    Submit: 6880Time Limit: 1000 mSec    Memory Limit : 32768 KB Problem Descr ...

  3. 小tip:FireFox下文本框/域百分比padding bug解决——张鑫旭

    一.问题描述 我是流体布局控,经常会遇到文本框以及文本域宽度100%自适应显示的情况. 如下效果图: 在窄屏下,上面的文本框宽度也要跟着外部宽度变小. 难点对于文本框或者文本域,光标最好距离左侧边缘有 ...

  4. Wannafly挑战赛9 E - 组一组

    链接:https://www.nowcoder.net/acm/contest/71/E来源:牛客网 题目描述 有一个长为 n 的数列 A,其中有 m 个限制条件,条件有两种: 1.对于区间 [l,r ...

  5. react 使用map 的时候提示 没有返回值

    因为map 的函数体里 用了if判断,在if块之外return 一个值就可以了 <div className="service-entry"> {!!services ...

  6. Javaweb查询客户&分页部分代码

    pageBean工具类代码(分页工具) package com.home.domain; import java.util.List; /** * 分页的JavaBean * @author Admi ...

  7. 【java8】慎用java8的foreach循环（作废）

    +警告 这篇文章作废掉,是由一个错误的测试方法得到的一个错误结论,后续修正结果正在测试,将贴上. 准确测试已完成:http://www.cnblogs.com/yiwangzhibujian/p/69 ...

  8. Django 模板语言 标签

    前言:django的模板语法基本和flask的jinja2基本一样.下面比较一下两个模板语法的区别. ------深度变量的查找(万能的句点号) 在 Django 模板中遍历复杂数据结构的关键是句点字 ...

  9. 泪奔的ie

    ie是不支持text 空白节点的所以想用这个写法清除inline-block可以休矣!!!$('.container').contents().filter(function() { return t ...

  10. LeetCode题解之Flipping an Image

    1.题目描述 2.题目分析 使用C++的迭代器 3.代码 vector<vector<int>> flipAndInvertImage(vector<vector< ...