trackbacks-0
　一开始我是这么想的，将待移入的元素分割四块，用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的。
所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向，如下图：
　　对于数学不太好的我，只能上网找下看有没有人解决了。找到了如下这段：
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;
当时就惊呆了，初看不知道什么意思，重新梳理下，发现这段代码跟我的思路是一样的。
那就让我来一步一步解释这段代码吧！
1)、将判断区域问题转成判断角度。
2）、x和y的计算：
　　该元素的坐标原点是(offsetLeft, offsetTop),那么要转成判断角度，必须将原点拉到该元素的中点上。则中点的坐标是Oz( &offsetLeft + w/2, &offsetTop + h/2 &);
那么鼠标落入的点M(e.pageX,e.pageY);
　　如果要将这个点转成以Oz为中心，那么就得换算成&x点：e.pageX - (offsetLeft + w/2) ；&y点：e.pageY - (offsetTop + h/2)。
那么x和y就出来了。 &(w & h ? (h / w) : 1)和&(h & w ? (w / h) : 1)这两个请先忽略，后面会解释。
3）、Math.atan2(x,y)函数：
　　这个函数返回的值相当于这个点的角度，当然貌似这些编程语言里返回的基本都是弧度。而这代码是用角度来算的所以避免不了弧度和角度的转换，
公式：弧度=角度乘以&后再除以180，
　　　　角度=弧度除以&再乘以180　　
(Math.atan2(y, x) * (180 / Math.PI) &其实等于这个&(Math.atan2(y, x) / ( Math.PI/ 180)&
4）、核心部分，
　　&Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
+180 ：从第三步我们可以得到角度了，但为什么还要加个180，原因是原来的坐标轴是(-180,180)度的，加个180那么就都成正的，即(0,360)，这个不难理解。
/90 ：那为什么要除于90呢，要知道90，就必须理解&&(w & h ? (h / w) : 1)和&(h & w ? (w / h) : 1) 这段代码的意思将矩形矫正成正方形（特殊矩形的矩形是正方形所以也就有了这种判断，其实判不判段都一样）。如果我们的元素是个正方形的话，那两条对角线相交的那些角就都是90度了（下图,图中标明的那个角）。
+3 &的意思，只要知道我们角度区间是从右上方开始算起的，然后顺时针计算的就可以了。该作者想要将结果显示的顺序是 上右下左，所以加三就是将第一区间变成上。
&Math.round() ,四舍五入，那么问题来，我们的X轴和Y轴可不是斜着的呀（如图），那这样角度计算不就成问题了。所以就由Math.round()函数发挥作用了，比如计算下0-90中任何一个数除于除于90，我们可以得到 0~1之间的数，如果加个四舍五入呢？那么结果就只有0和1了，刚好45度角是我们分割线。（只能说写出这个代码的人牛）
%4取余，保证结果是0、1、2、3 之间的一个（分别代表上、右、下、左）。
&这个是我的仿百度新闻传媒动画案例，当然比它实现更好些，就是加入了上面的判断，哈哈。 js库是jquery。
/cjz5aBh3rck9e （提取码：ddc0）
阅读(...) 评论()mouseout怎么判断鼠标离开的位置_百度知道偶然将想到的一个如何判断鼠标从哪个方向进入一个容器的问题。首先想到的是给容器的四个边添加几个块，然后看鼠标进入的时候哪个块先监听到鼠标事件。不过这样麻烦太多了。google了一下找到了一个不错的解决方法，是基于jquery的，
说实话，其中的var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;这句用到的数学知识我是真没有看明白，原文中有一些英文注释我就不一一说明了。代码部分不是很多，我直接写了个示例。
&!DOCTYPE html&
&meta charset="UTF-8"&
&title&判断鼠标进入方向&/title&
html,body{margin:0;padding:0;}
#wrap{width:300height:300background:#33aa00;margin:50display:inline-font-size:50text-align:line-height:300}
&div id="wrap"&
&script type="text/javascript" src="/script/jquery.js"&&/script&
$("#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;
var eventType = e.
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseenter'){
$(this).html(dirName[direction]+'进入');
$(this).html(dirName[direction]+'离开');
鼠标移动到上面，可以看到效果。其中返回的direction的值为“0,1,2,3”分别对应着“上，右，下，左”
所以结果值可以switch循环
switch (direction) {
$(this).html('上方进入');
$(this).html('右侧进入');
$(this).html('下方进入');
$(this).html('左侧进入');
原文代码是基于jquery的，后面我写了个原生的js效果，代码没有封装，给需要的朋友。由于firefox等浏览器不支持mouseenter,mouseleave事件，所以我暂时用mouseover,mouseout代替了，如果大家需要解决冒泡问题的话，还是自行搜索兼容性解决方法吧。
var wrap = document.getElementById('wrap');
var hoverDir = function(e){
var w=wrap.offsetW
var h=wrap.offsetH
var x=(e.clientX - wrap.offsetLeft - (w / 2)) * (w & h ? (h / w) : 1);
var y=(e.clientY - wrap.offsetTop - (h / 2)) * (h & w ? (w / h) : 1);
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
var eventType = e.
var dirName = new Array('上方','右侧','下方','左侧');
if(e.type == 'mouseover' || e.type == 'mouseenter'){
wrap.innerHTML=dirName[direction]+'进入';
wrap.innerHTML=dirName[direction]+'离开';
if(window.addEventListener){
wrap.addEventListener('mouseover',hoverDir,false);
wrap.addEventListener('mouseout',hoverDir,false);
}else if(window.attachEvent){
wrap.attachEvent('onmouseenter',hoverDir);
wrap.attachEvent('onmouseleave',hoverDir);
作者：痞子
原贴地址：http://www.niumowang.org/javascript/js-direction/TB前卫网店铺大全为您精选最好的精品店铺导航，欢迎您。上一篇：当前位置：>>栏目：数码科技&&&发布时间：&&&来源：前端大全&&&编辑：FrontDev作者：流云诸葛链接：/lyzg/p/5689761.html本文要介绍的是一种鼠标从一个元素移入移出时，获得鼠标移动方向的思路。这个策略可以协助你判断鼠标在移入移出时，是从上下摆布的哪一个方向产生的。这个思路，是我自我揣摩出来，应用了一点曾高中学过的数学知识，然而特别简单好理解，但愿能对你有所协助。在线demo：http://liuyunzhuge.github.io/blog/mouse_direction/demo1.html相干代码：/liuyunzhuge/blog/blob/master/mouse_direction/demo1.js此外demo1.html里面还有部份逻辑代码。效果演示：思路详解1. 把元素框分成以下四部份：只要能判断出鼠标移入移出时属于哪一个部份的规模内，问题便可解决。而这个判断可通过斜率，结合鼠标的位置与元素框中心点的位置对比得出。这个判断原理，采取下面的坐标系图解来讲明。2. 解决这个问题，树立以下图坐标系：1）上图以阅读器可视区域左上角为原点树立坐标系，坐标系与数学坐标系方向一致，往右表示x轴正方向，往下表示y轴负方向；2）图中点(x1,y1)代表元素框左上角，(x4,y4)代表元素框右下角，(x0,y0)代表元素框的中心点，（x,y）表示鼠标移入移出时与元素框的边的交点；3）依据下面的公式：可得(x1,y1)与（x4,y4)这条对角线的斜率为 k = (y1-y4)/(x1-x4)。因为对称性，元素框此外一条对角线的斜率必定是 -k。同时因为(x1,y1)与（x4,y4)这条对角线在座标系中必定经由的是第二以及第四象限，所以k确定是负值，而 -k必定是正值。4）依据一样的公式，当鼠标移入移出时的瞬时，与元素边框的交点与元素框中心点的斜率 k1 = (y-y0)/(x-x0)。5）由图可知，当 k & k1 & –k时，鼠标必定是从元素的摆布方向移动的；反之，必定是从上下方向移动的。当鼠标是从摆布方向移动时，如果x & x0，那末鼠标就是从右侧移动的，反之就是从左侧移动的；当鼠标是从上下方向移动时，如果y & y0时，那末鼠标就是从上边移动的，反之就是从下边移动的。注意：坐标系中所有的y值都是负的。以上便是这个问题，我提供的解决思路，通过上面的图解说明，相信大家理解起来会对比容易。如果查看我提供的代码实现demo1.js，会发现代码的逻辑，跟上面的图解说明也是一致的。固然这个思路只是解决如何判断鼠标移入移出的方向问题，demo中的效果实现最后还得要借助css 过渡才行，无非这个部份就更简单了，详细代码可见demo1.html的源码，逻辑特别简单，这里就再也不详细说明了。其它思路在得出上面的思路以前，我其实已在网上知道到此外一个思路实现了，我把该实现也做了一个demo：http://liuyunzhuge.github.io/blog/mouse_direction/demo2.html代码：/liuyunzhuge/blog/blob/master/mouse_direction/demo2.js固然这两个demo，从效果上没有任何区分，它们的区分仅仅在于鼠标移动方向判断的算法不同而已经。这个算法可以在demo2.js中找到，你也能够通过下面的两篇文章知道到它的一些介绍：/notes/c048fa87b5e474a15e:storey-1/web/112.html无非愧疚的是，我并无看懂这个思路的原理，所以我这里也给不出解释说明了，尽管在别之处看到了一些解释，然而其实不是很清晰，所以我才去想有无更简单理解的策略实现。实际工作中，我认为这两种思路都是可使用的，用哪一个凭自我喜好抉择就好了。总结最后但愿本文提供的这个小东西在你往常工作的时候，能够派上用处，为你的页面添加一些活泼的滑入滑出效果等等，同时也算是自我的一个累积。【本日微信公号举荐】更多举荐请看《》其中举荐了包含技术、设计、极客&以及&值得关注的技术以及设计公家号》，发现精彩！【公众号】：前端大全【微信号】：FrontDev【微宣言】：分享Web前端相关的技术文章、工具资源、精选课程、热点资讯下一篇：随意看看从来都是开水涮肉片的童鞋，你们哪会知道水煮肉片的美味！！肉片一定是最...导语：生果成熟时，自然会从树上落下，甚么是灵性成长的果实呢？灵性成长...导语：未来B2B的各个细分领域中都可能会产生多余一家的B2B平台，上...秋冬吃虾补肾 虾的营养价值极高，能增强人体免疫力和性功能，加上其肉质...回复“排卵试纸”查看免费领取排卵试纸好孕套装资历压力尽管是无形的，可...包装首要吗？那必需的呀！现在不化装你好意思出门吗？正所谓人靠衣装马靠...传递简单的生活态度 　　《领御》：江小白定位于年轻时尚群体，是否意味...教你健康养身洋葱是不可多得的对人身体有利处的食品。其至于调理血脂、血...“西风起，蟹脚响”，又到了秋高气爽吃螃蟹的季节。红岛金秋休闲游马上开...新智元举荐
来源：华为心神社区【新智元导读】本文选自华为开创人兼总...推荐文章欢迎加入2017国考学习群一、公务员工资调剂方案等...白羊座 千万别听信白羊女：“我自己一个人能行！” 白羊女没事就爱逞强...01. 人生的最高境地：忙中不说错话，乱局不看错人，繁杂不走错路。0...??????? "蓝色字"房地产财税学习平台? 提供房地产最专业，最...粉色系在秋季带来一丝甜美的气味，是街头靓丽的景色线。是出街吸睛的症结...曹云金开撕郭德纲已一周了，现在的年青人仿佛都已看惯了这类明星间的狗血...各位小火伴们，现在是小编在佛山南海新公交三标的现场给大家发来贺电！ ...在轻客市场，一辆高形象高机能的招待用车，必需具有大空间、经济性、舒适...来自 ：绯闻公子（id:Fgongzi520）最近娱乐界的喜事真的是...宫颈癌、乳腺癌，可谓当代女性的两大头号天敌。就算是名人明星，虽然有着...声明：TB前卫（）所有信息来源于网络，转载的文章、图片、数据等内容版权均属于原网站、原店铺、原作者等拥有，如有举报、反馈或投诉等情况请联系站长:TB前卫汇集精品店、旗舰店网址/店铺信息/商品展示，并不售卖任何商品，展示信息仅供参考，购买商品均在点击链接后到淘宝/天猫商铺成交，故安全可靠。.Copyright &
&&/&& 珠海博爱心理咨询有限公司旗下All Rights Reserved&& 云主机支持：&&|&&|&&|&&|&&|&&|&&|&&&&&Processed in 0.0031 second(s)关于js判断鼠标移入元素的方向--解释 - ja颂 - 博客园
　　一开始我是这么想的，将待移入的元素分割四块，用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的。
所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向，如下图：
　　对于数学不太好的我，只能上网找下看有没有人解决了。找到了如下这段：
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;
当时就惊呆了，初看不知道什么意思，重新梳理下，发现这段代码跟我的思路是一样的。
那就让我来一步一步解释这段代码吧！
1)、将判断区域问题转成判断角度。
2）、x和y的计算：
　　该元素的坐标原点是(offsetLeft, offsetTop),那么要转成判断角度，必须将原点拉到该元素的中点上。则中点的坐标是Oz( &offsetLeft + w/2, &offsetTop + h/2 &);
那么鼠标落入的点M(e.pageX,e.pageY);
　　如果要将这个点转成以Oz为中心，那么就得换算成&x点：e.pageX - (offsetLeft + w/2) ；&y点：e.pageY - (offsetTop + h/2)。
那么x和y就出来了。 &(w & h ? (h / w) : 1)和&(h & w ? (w / h) : 1)这两个请先忽略，后面会解释。
3）、Math.atan2(x,y)函数：
　　这个函数返回的值相当于这个点的角度，当然貌似这些编程语言里返回的基本都是弧度。而这代码是用角度来算的所以避免不了弧度和角度的转换，
公式：弧度=角度乘以&后再除以180，
　　　　角度=弧度除以&再乘以180　　
(Math.atan2(y, x) * (180 / Math.PI) &其实等于这个&(Math.atan2(y, x) / ( Math.PI/ 180)&
4）、核心部分，
　　&Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
+180 ：从第三步我们可以得到角度了，但为什么还要加个180，原因是原来的坐标轴是(-180,180)度的，加个180那么就都成正的，即(0,360)，这个不难理解。
/90 ：那为什么要除于90呢，要知道90，就必须理解&&(w & h ? (h / w) : 1)和&(h & w ? (w / h) : 1) 这段代码的意思将矩形矫正成正方形（特殊矩形的矩形是正方形所以也就有了这种判断，其实判不判段都一样）。如果我们的元素是个正方形的话，那两条对角线相交的那些角就都是90度了（下图,图中标明的那个角）。
+3 &的意思，只要知道我们角度区间是从右上方开始算起的，然后顺时针计算的就可以了。该作者想要将结果显示的顺序是 上右下左，所以加三就是将第一区间变成上。
&Math.round() ,四舍五入，那么问题来，我们的X轴和Y轴可不是斜着的呀（如图），那这样角度计算不就成问题了。所以就由Math.round()函数发挥作用了，比如计算下0-90中任何一个数除于除于90，我们可以得到 0~1之间的数，如果加个四舍五入呢？那么结果就只有0和1了，刚好45度角是我们分割线。（只能说写出这个代码的人牛）
%4取余，保证结果是0、1、2、3 之间的一个（分别代表上、右、下、左）。
&这个是我的仿百度新闻传媒动画案例，当然比它实现更好些，就是加入了上面的判断，哈哈。 js库是jquery。
/cjz5aBh3rck9e （提取码：ddc0）
阅读(...) 评论()