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

先看结构和样式：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>判断鼠标移入移出方向</title>
  6.     <style type="text/css">
  7.         * {
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .outer {
  12.             width: 400px;
  13.             height: 300px;
  14.             border: 2px solid orange;
  15.             margin: 100px auto;
  16.             overflow: hidden;
  17.             position: relative;
  18.         }
  19.         .outer img{
  20.             width: 400px;
  21.             height: 300px;
  22.         }
  23.         .outer div {
  24.             position: absolute;
  25.             width: 100%;
  26.             height: 100%;
  27.             background-color: black;
  28.             opacity: 0.5;
  29.             display: none;
  30.             line-height: 300px;
  31.             color: white;
  32.         }
  33.     </style>
  34. </head>
  35. <body>
  36. <div class="outer">
  37.     <img src="timg.jpg">
  38.     <div class="mask">如果有来生，有没有人爱，我也要努力做一个可爱的人。</div>
  39. </div>
  40.  
  41. <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
  42. <script src="jquery.hover.js" type="text/javascript" charset="utf-8"></script>
  43. <script type="text/javascript">
  44.     $(function(){
  45.         $(".outer").fangxiang();
  46.  
  47.     })
  48.  
  49. </script>
  50. </body>
  51. </html>

下面是封装的jquery.hover.js

  1. ;(function($){
  2.     $.fn.fangxiang = function(){
  3.         var disL = $(this).offset().left;
  4.         var disR = disL + $(this).outerWidth();
  5.         var disT = $(this).offset().top;
  6.         var disB = disT + $(this).outerHeight();
  7.  
  8.         $(this).hover(function(e){
  9.             var dirL = Math.abs(e.clientX-disL);
  10.             var dirR = Math.abs(e.clientX-disR);
  11.             var dirT = Math.abs(e.clientY-disT);
  12.             var dirB = Math.abs(e.clientY-disB);
  13.  
  14.             var dir = Math.min(dirL,dirR,dirT,dirB);
  15.  
  16.             switch(dir){
  17.                 case dirL:
  18.                     $(this).find("div").show().css({"left":-$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);
  19.                     break;
  20.                 case dirR:
  21.                     $(this).find("div").show().css({"left":$(this).outerWidth(),"top":0}).stop().animate({"left":0},500);
  22.                     break;
  23.                 case dirT:
  24.                     $(this).find("div").show().css({"top":-$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);
  25.                     break;
  26.                 case dirB:
  27.                     $(this).find("div").show().css({"top":$(this).outerHeight(),"left":0}).stop().animate({"top":0},500);
  28.                     break;
  29.             }
  30.  
  31.         },function(e){
  32.             var dirL = Math.abs(e.clientX-disL);
  33.             var dirR = Math.abs(e.clientX-disR);
  34.             var dirT = Math.abs(e.clientY-disT);
  35.             var dirB = Math.abs(e.clientY-disB);
  36.  
  37.             var dir = Math.min(dirL,dirR,dirT,dirB);
  38.  
  39.             switch(dir){
  40.                 case dirL:
  41.                     $(this).find("div").stop().animate({"left":-$(this).outerWidth()},500);
  42.                     break;
  43.                 case dirR:
  44.                     $(this).find("div").stop().animate({"left":$(this).outerWidth()},500);
  45.                     break;
  46.                 case dirT:
  47.                     $(this).find("div").stop().animate({"top":-$(this).outerHeight()},500);
  48.                     break;
  49.                 case dirB:
  50.                     $(this).find("div").stop().animate({"top":$(this).outerHeight()},500);
  51.                     break;
  52.             }
  53.         })
  54.     }
  55. })(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—14JdbcTemplate

    pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  2. OpenGL学习—04--彩色立方体

        1.tutorial04.cpp // Include standard headers #include <stdio.h> #include <stdlib.h> ...

  3. hadoop HA集群搭建步骤

      NameNode DataNode Zookeeper ZKFC JournalNode ResourceManager NodeManager node1 √   √ √   √   node2 ...

  4. Java类的封装

    java中四种不同的限定词限定的成员(成员变量或成员变量方法),访问权限由大到小依次为: public(公共的) 可以被所有的类访问 protected(受保护的) 可以被这个类本身访问 可以被它的子 ...

  5. KHFlatButton

    KHFlatButton https://github.com/kylehorn/KHFlatButton 效果: 对于自己做demo来说,每次设置button就不用这么折腾了,几句话就行了,非常爽: ...

  6. 第一个 mac 程序 Create-JSON-Model

    第一个 mac 程序 Create-JSON-Model 效果图 数据 {"ID":null,"name":"Doe","firs ...

  7. js实现字符串一个一个依次显示

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  8. VS2015 无法启动IIS Express Web服务器（已解决）

    VS2015 无法启动IIS Express Web服务器 首先说一下我遇到问题的情况.这个项目是在公司电脑创建的,运行一直是正常的.今天把项目拷贝回来做. 可是到自己的电脑上,运行就提示 无法启动I ...

  9. 关于markdown格式的测试..

    标题 标题一 这是? 标题二 标题三 标题四 区块 1.这是一个列表项目 还是吗? 嵌套了? 空格了? 区块加列表 标题加二级列表 嘿嘿 无序列表 RED GREEN BLUE 有序列表 dog ca ...

  10. 使用Thunderbird时你可能会用到的技巧

    1.添加qq邮箱账号 (1).开启IMAP/SMTP服务 先在QQ网页邮箱-设置-账户:开启IMAP/SMTP服务(2). Thunderbird 里设定端口(非POP):IMAP:imap.qq.c ...