今天用jQuery封装了一个简单的插件，判断鼠标的移入移出方向，以后的项目中可能还会遇到这样一个简单的效果，就记录下来吧！

先看结构和样式：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>判断鼠标移入移出方向</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .outer {

            width: 400px;

            height: 300px;

            border: 2px solid orange;

            margin: 100px auto;

            overflow: hidden;

            position: relative;

        }

        .outer img{

            width: 400px;

            height: 300px;

        }

        .outer div {

            position: absolute;

            width: 100%;

            height: 100%;

            background-color: black;

            opacity: 0.5;

            display: none;

            line-height: 300px;

            color: white;

        }

    </style>

</head>

<body>

<div class="outer">

    <img src="timg.jpg">

    <div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>

</div>

<script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

<script src="jquery.hover.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

    $(function(){

        $(".outer").fangxiang();

    })

</script>

</body>

</html>

下面是封装的jquery.hover.js

;(function($){

    $.fn.fangxiang = function(){

        var disL = $(this).offset().left;

        var disR = disL + $(this).outerWidth();

        var disT = $(this).offset().top;

        var disB = disT + $(this).outerHeight();

        $(this).hover(function(e){

            var dirL = Math.abs(e.clientX-disL);

            var dirR = Math.abs(e.clientX-disR);

            var dirT = Math.abs(e.clientY-disT);

            var dirB = Math.abs(e.clientY-disB);

            var dir = Math.min(dirL,dirR,dirT,dirB);

            switch(dir){

                case dirL:

                    $(this).find("div").show().css({"left":-$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);

                    break;

                case dirR:

                    $(this).find("div").show().css({"left":$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);

                    break;

                case dirT:

                    $(this).find("div").show().css({"top":-$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);

                    break;

                case dirB:

                    $(this).find("div").show().css({"top":$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);

                    break;

            }

        },function(e){

            var dirL = Math.abs(e.clientX-disL);

            var dirR = Math.abs(e.clientX-disR);

            var dirT = Math.abs(e.clientY-disT);

            var dirB = Math.abs(e.clientY-disB);

            var dir = Math.min(dirL,dirR,dirT,dirB);

            switch(dir){

                case dirL:

                    $(this).find("div").stop().animate({"left":-$(this).outerWidth()},500);

                    break;

                case dirR:

                    $(this).find("div").stop().animate({"left":$(this).outerWidth()},500);

                    break;

                case dirT:

                    $(this).find("div").stop().animate({"top":-$(this).outerHeight()},500);

                    break;

                case dirB:

                    $(this).find("div").stop().animate({"top":$(this).outerHeight()},500);

                    break;

            }

        })

    }

})(jQuery);

jquery.hover.js

感觉写的不是很完美，需要借助我写的这个结构才能使用，请大神帮忙优化！

附上使用的图片timg.jpg

jQuery插件,判断鼠标的移入移出方向的更多相关文章

  1. jQuery事件-div的显示隐藏及鼠标的移入移出

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

  2. 2015.10.11（js判断鼠标进入容器的方向）

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

  3. jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

    这个插件的名字elevatezoom,网址为http://www.elevateweb.co.uk/image-zoom,在github上的项目首页为https://github.com/elevat ...

  4. 判断鼠标进入容器的方向小Demo

    参考资料: 贤心博客:http://sentsin.com/web/112.html, Math.atan2(y,x) 解释 :http://www.w3school.com.cn/jsref/jsr ...

  5. JS用斜率判断鼠标进入DIV四个方向的方法 判断鼠标移入方向

    本文要介绍的是一种鼠标从一个元素移入移出时,获取鼠标移动方向的思路.这个方法可以帮助你判断鼠标在移入移出时,是从上下左右的哪个方向发生的.这个思路,是我自己琢磨出来,利用了一点曾经高中学过的数学知识, ...

  6. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  7. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  8. JS实现穿墙效果(判断鼠标划入划出的方向)

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

  9. Vue中通过鼠标移入移出来添加或取消class样式（active）

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

随机推荐

  1. CentOS7系列--1.5CentOS7配置vim

    CentOS7配置vim 1. 安装vim [root@centos7 ~]# yum -y install vim-enhanced Loaded plugins: fastestmirror ba ...

  2. CentOS7系列--1.4CentOS7服务

    CentOS7服务管理 1. 查看服务 1.1. 查看所有运行的服务 [root@centos7 ~]# systemctl -t service UNIT LOAD ACTIVE SUB DESCR ...

  3. 从CVE-2018-1273看漏洞分析

    漏洞分析的边界 漏洞分析最应该关注的是漏洞相关的代码,至于其余的代码可以通过关键位置下断点,来理解大概功能. 其中最关键的就是了解数据流,找到离漏洞位置最近的 原始数据 经过的位置,然后开始往下分析, ...

  4. 你写的什么垃圾代码让Vsync命令不能及时处理呢？（2）

    接上篇 1.TraceView Traceview看起来复杂,其实很简单: 上部分图中,X代表时间消耗,Y轴代表各个线程中的方法,且使用了不同颜色表示.面积越款,时间越长. 下部分为分析面板,分析面板 ...

  5. webstorm忽略node_modules目录

    我在使用了cnpm后node_modules之前的层级目录变成了同一级目录,所以目录很多,造成webstorm读取时卡死. 网上大家列了各种方法,在这里我归纳一下! 先给大家看看一些相关链接. 方法1 ...

  6. CCSUOJ评测系统——第二次scrum冲刺

    1.小组成员 舒 溢 许嘉荣 唐 浩 黄欣欣 廖帅元 2.第二次冲刺任务安排 对HUSTOJ数据库进行分析 序号 表名 作用 备注 1 compileinfo 记录编译错误的记录 2 contest ...

  7. 探索ORM ————iBati（一）

    ibatis   iBATIS一词来源于“internet”和“abatis”的组合,是一个由Clinton Begin在2001年发起的开放源代码项目.最初侧重于密码软件的开发,现在是一个基于Jav ...

  8. MATLAB filter2/conv2 函数在 Python 语言中的等价函数

    MATLAB filter2 和 conv2 函数说明 在 MATLAB 中,filter2 函数实现二维数字滤波器．conv2 函数实现二维卷积． filter2(H, X, mode) 等价于 c ...

  9. 第八章 SQL高级处理 8-2 GROUPING运算符

    一.同时得到合计行 合计行是不指定聚合键时得到的汇总结果. UNION ALL与UNION的不同之处是它不会对结果进行排序,因此比UNION性能更好.   二.ROLLUP——同时得出合计和小计 GR ...

  10. bug管理工具

    1..禅道 禅道项目管理软件(简称:禅道)集产品管理.项目管理.质量管理.文档管理.组织管理和事务管理于一体,是一款功能完备的项目管理软件,完美地覆盖了项目管理的核心流程. 禅道的主要管理思想基于国际 ...