今天用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. RabbitMQ，Windows环境下安装搭建

    切入正题:RabbitMQ的Windows环境下安装搭建 一.首先安装otp_win64_20.1.exe,,, 二.然后安装,rabbitmq-server-3.6.12.exe, 安装完成后,在服 ...

  2. dev gridview指定单元格cell获取坐标

    DevExpress.XtraGrid.Views.Grid.ViewInfo.GridViewInfo Info2 = gvQueryResult.GetViewInfo() as DevExpre ...

  3. 一：JavaWeb和Tomcat的安装

    1.Java Web 是java技术用来解决相关web互联网领域的技术总和. 2.Servlet是Java Servlet的简称,称为小服务程序或服务器连接器,用Java编写的服务器端程序 3.JSP ...

  4. Listview点击已读使用getBadgeView标示

    重:每个ListItem是属于ListItem自己的,不能够放到ViewHolder中,而是数据源每项的. @Override public View getView(int position, Vi ...

  5. web 应用请求乱码问题

    背景 作为非西欧语系的国家,总是要处理编码问题 使用java编码解码 @Test public void coderTest() throws UnsupportedEncodingException ...

  6. node(3)MVC代码结构模式moogoDB的学习

    ---恢复内容开始--- 一.MVC代码结构模式 设计模式:观察者模式.中介者模式,这种模式,主要做的事情是处理类与类之间‘高内聚.低耦合’; 代码架构模式:MVC.MVVM.MVP Model:模型 ...

  7. [翻译] M13ProgressSuite

    M13ProgressSuite https://github.com/Marxon13/M13ProgressSuite A set of classes used to display progr ...

  8. 屏蔽响应事件继续向父视图传递的category

    屏蔽响应事件继续向父视图传递的category 这篇教程是上一篇教程的升级版,将复杂的代码封装成了category,更便于使用:) 效果: 源码: UIGestureRecognizer+EnvetI ...

  9. Python学习---xml文件的解析[beautifulsoup4模块学习]

    1.1. 安装beautifulsoup4 pip install beautifulsoup4 [更多参考]https://blog.csdn.net/sunhuaqiang1/article/de ...

  10. jiekou

    接口 新的接口 package cn.eangaie.jingdong.controller;   import cn.eangaie.jingdong.entity.Result; import c ...