js判断鼠标进入以及离开容器的方向
(注:以下代码涉及到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判断鼠标进入以及离开容器的方向的更多相关文章
- 基于JQuery的获取鼠标进入和离开容器方向的实现
做动画时,需要判断鼠标进入和退出容器的方向.网上找到的基于JQuery的实现方法,用函数封装了一下,写了一个示例.注意绑定鼠标事件用的是on(),所以JQuery版本需高于1.7. <!DOCT ...
- JS 判断鼠标滚轮的上下滚动
JS 判断鼠标滚轮的上下滚动 <script type="text/javascript"> var scrollFunc = function (e) { e = ...
- JS判断鼠标从什么方向进入一个容器
偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题.首先想到的是给容器的四个边添加几个块,然后看鼠标进入的时候哪个块先监听到鼠标事件.不过这样麻烦太多了.google了一下找到了一个不错的解决方 ...
- JS判断鼠标进入容器方向的方法和分析window.open新窗口被拦截的问题
1.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢?首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种 ...
- 2015.10.11(js判断鼠标进入容器的方向)
判断鼠标进入容器的方向 1.前几天在万圣节专题项目中用到了鼠标坐标page事件,随着鼠标背景图片移动形成有层次感的效果,但page事件在IE低版本不支持,所以还要做兼容.在研究page事件同时无意中想 ...
- JS判断鼠标移入元素的方向
最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { v ...
- js判断鼠标位置是否在某个div中
div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办 ...
- js判断鼠标是否停止移动
本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0: ...
- JS判断鼠标向上滚动还是向下滚动
js如何判断滚轮的上下滚动,我们应该都见到过这种效果,用鼠标滚轮实现某个表单内的数字向上滚动就增加,向下滚动就减少的操作,这种效果是通过js对鼠标滚轮的事件监听来实现的.今天简单的研究了一下如何使用j ...
随机推荐
- Vim简要说明
说明:在这篇文章里面,[C-X] 代表 Ctrl + X--就是按住 Ctrl 键然后再按 X.而且你可以在很多情况下使用 :help command 来获得大部分命令的帮助,这个是VIM的内部帮助文 ...
- [置顶] TortoiseGit和msysGit安装及使用笔记(windows下使用上传数据到GitHub)
eclipse .MyEclipse 配置安装 git:http://wenku.baidu.com/link?url=gMT4a7K6EJWAztuwun73oPHiKqlydEdn5F3S2Win ...
- bootstrap加深
1.安装: bootstrap中文网:http://www.bootcss.com/ bootstrap.css样式:http://v3.bootcss.com/css/#tables class=' ...
- 使用windows资源管理器的排序规则
对于windows资源管理器 abc_1_def是要排到abc_10_def前面的 而一般的排序规则, 都会吧_10_排到前面 所以为了使用习惯, 最好用资源管理器的排序规则, windows有个AP ...
- Day3~Day7(2016/1/23~2016/1/27)
活动的生命周期:onCreate();onStart();onResume();onPause();onStop();onDestroy();onRestart(); 活动的启动模式:standard ...
- CSS样式 让你的输入的小写自动变成大写。
1.transform:uppercase 参考:http://www.w3school.com.cn/cssref/pr_text_text-transform.asp 2.可以让你实现输入的小写 ...
- elk实战分析nginx日志文档
elk实战分析nginx日志文档 架构: kibana <--- es-cluster <--- logstash <--- filebeat 环境准备:192.168.3.1 no ...
- iptables nt
占位... 扩展 1.其实匹配扩展中,还有需要加-m引用模块的显示扩展,默认是隐含扩展,不要使用 -m 状态检测的包过滤-m state --state {NEW,ESTATBLISHED ...
- Spring MVC 入门示例讲解
在本例中,我们将使用Spring MVC框架构建一个入门级web应用程序.Spring MVC 是Spring框架最重要的的模块之一.它以强大的Spring IoC容器为基础,并充分利用容器的特性来简 ...
- 简单Hosts使用说明
1.查找hosts文件 首先,点击桌面的"我的电脑",或者是通过开始菜单进入到我的电脑. 之后,进入到"C:\Windows\System32\drivers\etc&q ...