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

$(".flash").bind("mouseenter mouseleave",function(e){

    /** the width and height of the current div **/
    var w = $(this).width();
    var h = $(this).height();

    /** calculate the x and y to get an angle to the center of the div from that x and y. **/
    /** gets the x value relative to the center of the DIV and "normalize" it **/
    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 );

    /** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
    /** first calculate the angle of the point,
     add 180 deg to get rid of the negative values
     divide by 90 to get the quadrant
     add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
    var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180 ) / 90 ) + 3 )  % 4;

    /** do your animations here **/
    switch(direction) {
     case 0:

        alert(1)
      /** animations from the TOP **/
     break;
     case 1:
        alert(2)
      /** animations from the RIGHT **/
     break;
     case 2:
        alert(3)
      /** animations from the BOTTOM **/
     break;
     case 3:
        alert(4)
      /** animations from the LEFT **/
     break;

}});
    

HTML:

<div class="flash">
</div>

Css:

.flash{
    width:200px;
    height:200px;
    margin-left:30%;
    background-color:red;
}
时间: 2024-11-05 19:01:46

JS判断鼠标从哪个方向进入DIV容器的相关文章

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

div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判定为离开div,会触发 onmouseout事件,这样div中的内容就不能操作了.解决的办法是当触发onmouseout事件时,先判断鼠标是否在div内,如果在,说明鼠 标并没有离开div,就不删除div,否则,删除之.OK,现在问题解决了. 就是找到该div左上角和右下角坐标,判断鼠标的坐标是否在这一区域就可以了. [javascript] view plaincopyprint? d

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

最终效果 这里的关键主要是判断鼠标是从哪个方向进入和离开的 $("li").on("mouseenter mouseleave",function(e) { var w = this.offsetWidth; var h = this.offsetHeight; var x = e.pageX - this.getBoundingClientRect().left - w/2; var y = e.pageY - this.getBoundingClientRect

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

一开始我是这么想的,将待移入的元素分割四块,用mousemove获取第一次鼠标落入的区域来判断鼠标是从哪个方向进去的. 所以只要写个算法来判断鼠标的值落入该元素的区域就可以得出鼠标移入的方向,如下图: 对于数学不太好的我,只能上网找下看有没有人解决了.找到了如下这段: var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); var y = (e.pageY - this.offsetTop - (h / 2))

判断鼠标从哪个方向进入容器

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>判断鼠标进入方向</title> </head> <body> <style> html,body{margin:0;padding:0;} #wrap{width:300px;height:300px;background:#33aa00;margin:50p

js判断鼠标是否停止移动

本程序实现当鼠标在一个特定的div内悬停n秒时,判断出已经停止移动. 思路: 1.定义全局变量鼠标移动状态imouse,定时器timer.当鼠标在div内移动时,imouse值为1,相反静止时值为0:timer可以实现每过n秒就判断鼠标状态,然后把imouse重置为0: 2.div监听onmouseover.当鼠标进入区域时,就设置定时器: 3.div监听onmousemove.当鼠标移动时,设置imouse值为1: 4.div监听onmouseout.当鼠标离开时,清除定时器timer <ht

判断鼠标移入移出方向设置

原理:以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π /4),[-π/4,π/4)划分为四个象限,鼠标进入容器时的点的atan2(y,x)值在这四个象限里分别对应容器边框的下,右,上,左.如下图所示 Js代码 var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 计算x坐标值时,如果点原来的x坐标的绝对值大于圆的半径值,则按 h

Js判断H5上下滑动方向及滑动到顶部和底部判断

昨天一位做移动端H5开发的同事说,H5滑动方向要实时判断向下还是向上,但判断是否滑动到底部时判断有问题一直没解决,于是就去问度娘,搜了很多资料,大部分有重复,于是根据大家的资料借鉴学习,在大家的基础上写了一个小例子.功能主要时可以实时的判断上下滑动的方向,是否滑动到底部或顶部来做某些事件触发.例子中有使用到其他博客上的内容,如原作者看到请勿怪,如果例子中有错误的请大家指正.如果使用pc端浏览器查看请把浏览器设置为手机浏览器模式. <!DOCTYPE HTML> <html> <

js判断鼠标滚动方向

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

js 判断鼠标滚轮方向

最近因为公司项目的要求,需要做页面的全屏滚动切换效果. 页面的切换,需要脚本监听鼠标滑轮的滚动事件,来判断页面是向上切换or向下切换. 这里的脚本很简单,我就直接贴出来吧. 1 $('html').on('mousewheel DOMMouseScroll', function (e) { 2 e.preventDefault(); 3 var t = new Date().getTime(); 4 //防止鼠标滚动太快 5 if (t - Const.scrollTime < 1400) {