今天用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. Spring Boot--01错误处理

    package com.smartmap.sample.ch1.controller.view; import java.io.IOException; import java.util.Collec ...

  2. 非J2EE部署解决方案

     根据交银施罗德真实环境已测试通过,此过程可以作为非J2EE部署的典型案例,主要是针对某些对安全性要求较高的解决方案: 基本的实现原理和部分代码如下: 1.客户端访问交银.net系统,由该系统发送 ...

  3. mybatis 一对多 id标签作用

    一对多 MyBatis的resultMap只用于配置结果如何映射,id的唯一作用就是在嵌套的映射配置时判断数据是否相同,当配置id标签时,MyBatis只需要逐条比较所有数据中id标签字段值是否相同即 ...

  4. zabbix系列之四——快速使用

    https://www.zabbix.com/documentation/3.4/manual/quickstart/login Quickstart 1login and configuring u ...

  5. logback总结

    Logback Logback由三大模块组成:logback-core.logback- classic和logback-access. Logback-core是其它两个模块的基础模块. Logba ...

  6. log4j配置详解(非常详细)

    Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...

  7. Linux 挂载

    千万不要挂载到 根目录下 也不要用 umount -fl  会死的 fdisk -l 看 能挂载的是哪个盘 格式化 mkfs.ext4 /dev/vde 创建一个文件 mkdir /testmnt 卸 ...

  8. C++易混淆概念

    1. 引用和指针有什么区别? 本质:一个是别名,一个是地址1. 指针可以在运行时改变其所指向的值,引用一旦和某个对象绑定就不再改变2. 引用没有const, 指针有const 3. 从内存上看,指针会 ...

  9. Custom Settings.ini 和 bootstrap.ini 配置

    [Settings]Priority=DefaultProperties=MyCustomProperty [Default] ;SkipWizard=YES 如果跳过部署向导,则即使 SkipCap ...

  10. (1)Set集合 (2)Map集合 (3)异常机制

    1.Set集合(重点)1.1 基本概念 java.util.Set接口是Collection接口的子接口,与List接口平级. 该接口中的元素没有先后放入次序,并且不允许重复. 该接口的主要实现类:H ...