zoukankan      html  css  js  c++  java
  • 一个代码段(判断鼠标进入方向)

    $("li").on("mouseenter mouseleave",function(e) {
               var w = this.offsetWidth;
               var h = this.offsetHeight;
               var toTop = this.getBoundingClientRect().top + document.body.scrollTop;  //兼容滚动条
               var x = (e.pageX - this.getBoundingClientRect().left - (w / 2)) * (w > h ? (h / w) : 1);   //获取当前鼠标的x轴位置
               var y = (e.pageY - toTop - h/2) * (h > w ? (w / h) : 1);
              //上面对长方形也做了兼容,也就是按照最小的那个边的一半作为半径了
              //例如有一个宽6,高是2的矩形 右上角的坐标就是{x:3,y:1},经过上面的计算后{x:2/6 * 3,y:1}=》{x:1,y:1}   算出来也就是45°的样子
              //如果是正方形,可以去掉后面的系数(w>h && h>w)
               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 res = Math.atan2(y, x) / (Math.PI / 180) + 180 ;
               $('.line').css('transform','rotate('+ res +'deg)');
    
               // console.log(((Math.atan2(y, x) * 180 / Math.PI) + 180));
               // console.log(Math.round((Math.atan2(y, x) / (Math.PI / 180) + 180) / 90 + 3) % 4);
               var dirName = new Array('上方','右侧','下方','左侧');
    
                   $('.res').text(res + 'deg');
    
               if(eventType == 'mouseenter'){
                  $('.res').text(dirName[direction]+'进入');
                  animationIn(direction);
              }else{
                  $('.res').text(dirName[direction]+'离开');
                  animationOut(direction);
              }
          });

    转载自:http://www.jianshu.com/p/2a851db6475a

  • 相关阅读:
    Xamarin.Forms学习之位图(一)
    Xamarin.Forms学习之Platform-specific API和文件操作
    Xamarin.Forms学习之Page Navigation(二)
    Xamarin.Forms学习之Page Navigation(一)
    Xamarin.Forms学习之XAML命名空间
    Xamarin.Forms学习之初
    新手浅谈C#Task异步编程
    新手浅谈Task异步编程和Thread多线程编程
    新手浅谈C#关于abstract和interface
    Boost C++ 库
  • 原文地址:https://www.cnblogs.com/guojikun/p/6179551.html
Copyright © 2011-2022 走看看