(注:以下代码涉及到jQuery,建议前端大牛绕路~~~)

1、遇到的问题

     如图当鼠标右箭头位置上下移动的时候  下面的城市列表容器不能隐藏。

2、方法:

网上搜了些前端大牛们的解决办法(当然该方法不但是针对此情况的),采用判断鼠标溢出的方位来响应事件。

具体如下:

 $(".where").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;
if(e.type == 'mouseleave'){
if(direction != 2){
$('.citys').hide();
$('.where em').hide();
$('.where').removeClass('w-where');
};
}
});

代码就是这个么代码,至于原理,下面看看大牛的解释吧:

源文件来自:贤心博客

js判断鼠标进入以及离开容器的方向的更多相关文章

  1. 基于JQuery的获取鼠标进入和离开容器方向的实现

    做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...

  2. JS 判断鼠标滚轮的上下滚动

    JS 判断鼠标滚轮的上下滚动   <script type="text/javascript"> var scrollFunc = function (e) { e = ...

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

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

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

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

  5. 2015.10.11(js判断鼠标进入容器的方向)

    判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...

  6. JS判断鼠标移入元素的方向

    最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...

  7. js判断鼠标位置是否在某个div中

    div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...

  8. js判断鼠标是否停止移动

    本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0: ...

  9. JS判断鼠标向上滚动还是向下滚动

    js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...

随机推荐

  1. Vim简要说明

    说明:在这篇文章里面,[C-X] 代表 Ctrl + X--就是按住 Ctrl 键然后再按 X.而且你可以在很多情况下使用 :help command 来获得大部分命令的帮助,这个是VIM的内部帮助文 ...

  2. [置顶] TortoiseGit和msysGit安装及使用笔记(windows下使用上传数据到GitHub)

    eclipse .MyEclipse 配置安装 git:http://wenku.baidu.com/link?url=gMT4a7K6EJWAztuwun73oPHiKqlydEdn5F3S2Win ...

  3. bootstrap加深

    1.安装: bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式:http://v3.bootcss.com/css/#tables class=' ...

  4. 使用windows资源管理器的排序规则

    对于windows资源管理器 abc_1_def是要排到abc_10_def前面的 而一般的排序规则, 都会吧_10_排到前面 所以为了使用习惯, 最好用资源管理器的排序规则, windows有个AP ...

  5. Day3~Day7(2016/1/23~2016/1/27)

    活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...

  6. CSS样式 让你的输入的小写自动变成大写。

    1.transform:uppercase  参考:http://www.w3school.com.cn/cssref/pr_text_text-transform.asp 2.可以让你实现输入的小写 ...

  7. elk实战分析nginx日志文档

    elk实战分析nginx日志文档 架构: kibana <--- es-cluster <--- logstash <--- filebeat 环境准备:192.168.3.1 no ...

  8. iptables nt

    占位... 扩展 1.其实匹配扩展中,还有需要加-m引用模块的显示扩展,默认是隐含扩展,不要使用 -m 状态检测的包过滤-m state       --state {NEW,ESTATBLISHED ...

  9. Spring MVC 入门示例讲解

    在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...

  10. 简单Hosts使用说明

    1.查找hosts文件 首先,点击桌面的"我的电脑",或者是通过开始菜单进入到我的电脑. 之后,进入到"C:\Windows\System32\drivers\etc&q ...