转载自:http://sentsin.com/web/112.html

$("#wrap").bind("mouseenter mouseleave",function(e) {
var w = $(this).width();
var h = $(this).height();
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4; //direction的值为“0,1,2,3”分别对应着“上,右,下,左”
var eventType = e.type;
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$("#result").html(dirName[direction]+'进入');
}else{
$('#result').html(dirName[direction]+'离开');
}
});

很实用的一段代码

判断鼠标从哪个方向进入--jQuery的更多相关文章

  1. JS判断鼠标从什么方向进入一个容器

    偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...

  2. JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题

    1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...

  3. js判断鼠标滑轮滚动方向并根据滚动的方向触发不同的事件

    <script> var scrollFunc = function (e) { var direct = 0; e = e || window.event; if (e.wheelDel ...

  4. JS判断鼠标从哪个方向进入DIV容器

    写的不够高大上 , 不要介意哦... Js: //进去 $(".flash").bind("mouseenter",function(e){ /** the w ...

  5. jQuery插件,判断鼠标的移入移出方向

    今天用jQuery封装了一个简单的插件,判断鼠标的移入移出方向,以后的项目中可能还会遇到这样一个简单的效果,就记录下来吧! 先看结构和样式: <!DOCTYPE html> <htm ...

  6. js中判断鼠标滚轮方向的方法

      前  言 LiuDaP 最近无聊,在做自己的个人站,其中用到了一个关于鼠标滚轮方向判断的方法,今天闲来无聊,就给大家介绍一下吧!!!! 在介绍鼠标事件案例前,让我们先稍微了解一下js中的event ...

  7. JS实现穿墙效果(判断鼠标划入划出的方向)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 关于js判断鼠标移入元素的方向--解释

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

  9. 关于js判断鼠标移入元素的方向——上下左右

    一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: ...

随机推荐

  1. hdu 3357 水题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3357 #include <cstdio> #include <cmath> # ...

  2. 主流H.264编码器对比测试 (MSU出品)

    俄罗斯的MSU Graphics & Media Lab (Video Group)出品的H.264编码器性能测试报告.测试了主流的H.264编码器的性能.从测试的结果来看,开源产品x264性 ...

  3. MP3播放器的实现

    今天,基本上实现了MP3播放器的基本功能,现在总结一下. 首先,下载服务器端的MP3列表,这里用到了下载技术和解析XML文件技术. 下载参考(http://blog.csdn.net/huim_lin ...

  4. 杠杠做的全屏随鼠标滚动显示图片,类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  5. LinearLayout增加divider分割线

    在android3.0及后面的版本在LinearLayout里增加了个分割线 1 2 android:divider="@drawable/shape"<!--分割线图片-- ...

  6. POJ 3384 Feng Shui 半平面交

    题目大意:一个人很信"Feng Shui",他要在房间里放两个圆形的地毯. 这两个地毯之间可以重叠,可是不能折叠,也不能伸到房间的外面.求这两个地毯可以覆盖的最大范围.并输出这两个 ...

  7. google(转帖)

    本帖最后由 qiushui_007 于 2014-6-10 16:14 编辑 IP Addresses of Google Global Cachewww.kookle.co.nr Bulgaria  ...

  8. 一行代码实现iOS序列化与反序列化(runtime)

    一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...

  9. Another app is currently holding the yum lock; waiting for it to exit... 怎么解决

    Another app is currently holding the yum lock; waiting for it to exit... 怎么解决 这个问题说明你的程序yum程序正在运行,必须 ...

  10. ASP.NET过滤器、URL重写

    过滤器可以对指定的URL访问进行拦截,并执行过滤器的方法,根据实际应用情况,在过滤器中修改请求的代码.判断会话信息,也可以做权限控制. 一:编写过滤器,实现URL重写并配置过滤 编写过滤器,就是编写一 ...