今天用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. javascript的继承实现

    javascript虽然是一门面向对象的语言,但是它的继承机制从一开始设计的时候就不同于传统的其他面向对象语言,是基于原型的继承机制,但是在这种机制下,继承依然有一些不同的实现方式. 方法一:类式继承 ...

  2. Application Context的设计

    基本上每一个应用程序都会有一个自己的Application,并让它继承自系统的Application类,然后在自己的Application类中去封装一些通用的操作.其实这并不是Google所推荐的一种 ...

  3. redis介绍（6）集群（ruby）

    redis集群: redis集群是高可用的一种体现,让整个redis圈更加稳定,不易出现宕机的情况, redis原理: redis3.0之前是不支持集群的,实现集群要自己去配置实现,很麻烦,在3.0之 ...

  4. redis介绍（5）主从复制

    redis的主从复制: 主从复制介绍:redis的主从复制情况下,一个master节点下可以有多个slave节点,而且每个slave节点又可以有很多slave节点,形成很大的集群量级,我简单画个图,如 ...

  5. 观察者模式 - Java 实现1（使用JDK内置的Observer模式）

    使用JDK内置的观察者模式 1. 可观察者(主题) 被观察的主题继承 Observable 对象, 使用该对象的调用 notifyObservers() 或 notifyObservers(arg) ...

  6. Python 中单双引号

    TODO, 在python中, 其实单双引号还是有分别的, 具体是什么?

  7. Prometheus Node_exporter 之 Basic CPU / Mem Graph

    1. CPU Basic cpu 的基本信息 /proc/stat type: GraphUnit: shortBusy System: cpu 处于核心态的占比 metrics: sum by (i ...

  8. Oracle EBS 清理归档

    oraprod 登陆数据库服务器 执行 rman target / 如图: 执行: delete noprompt force archivelog all completed before ‘sys ...

  9. 使用NSClassFromString

    使用NSClassFromString 使用NSClassFromString可以直接从字符串初始化出对象出来,即使不引用头文件也没关系,以下是源码: AppDelegate.m // // AppD ...

  10. [翻译] ALMoviePlayerController

    ALMoviePlayerController ALMoviePlayerController is a drop-in replacement for MPMoviePlayerController ...