今天用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. Flutter与Android混合开发及Platform Channel的使用

    相对于单独开发Flutter应用,混合开发对于线上项目更具有实际意义,可以把风险控制到最低,也可以进行实战上线.所以介绍 集成已有项目 混合开发涉及原生Native和Flutter进行通信传输,还有插 ...

  2. Android如何使用WebView访问https的网站

    Android中可以用WebView来访问http和https的网站,但是默认访问https网站时,假如证书不被Android承认,会出现空白页面,且不会有任何提示信息,这时我们必须加多一些配置. 此 ...

  3. oracle 用户系统权限

    conn sys as sysdba; create user test identified by test; grant create session to test; grant create ...

  4. easyui 笔记

    easyui-datagrid:loadFilter:处理服务器端传递过来的参数. 刷新datagrid:$("#xxx").datagrid('reload'): form 表单 ...

  5. Storm监控文件夹变化 统计文件单词数量

    监控指定文件夹,读取文件(新文件动态读取)里的内容,统计单词的数量. FileSpout.java,监控文件夹,读取新文件内容 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  6. zookeeper应用 - leader选举 锁

    模拟leader选举: 1.zookeeper服务器上有一个/leader节点 2.在/leader节点下创建短暂顺序节点/leader/lock-xxxxxxx 3.获取/leader的所有子节点并 ...

  7. use ROW_NUMBER() for pagination in Oracle and SQLServer

    ------------------------------------------------------------------------Oracle---------------------- ...

  8. MongoDB数据库安装及配置环境(windows10系统)

    windows10系统下MongoDB的安装及环境配置: MongoDB的安装 下载地址: https://www.mongodb.com/download-center (这是windows10环境 ...

  9. HTML--<frameset>標簽

    <html><frameset rows="20,80"> <frame src="/example/html/frame_a.html&q ...

  10. HBase HA的分布式集群部署（适合3、5节点）

    本博文的主要内容有: .HBase的分布模式(3.5节点)安装    .HBase的分布模式(3.5节点)的启动 .HBase HA的分布式集群的安装 .HBase HA的分布式集群的启动    .H ...