标签：鼠标 playerCount imgCount 0.01 js player 180 Math 指针

    var playerCount = 0;
    var imgCount = 0;
    /*
    * @description:计算鼠标的方向
    * @param:浏览器属性，元素
    * @author:aleck
    * @create:2021/08/25
    *
    * */
    function XYZ(e,player):Number{
        var w = player.offsetWidth,
         h = player.offsetHeight,
         toTop = player.getBoundingClientRect().top + document.body.scrollTop, //兼容滚动条
         x = (e.pageX - player.getBoundingClientRect().left - (w / 2)) * (w > h ? (h / w) : 1),   //获取当前鼠标的x轴位置
         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）
        //direction的值为“0,1,2,3”分别对应着“上，右，下，左”
         direction = Math.round((((Math.atan2(y, x) * 180 / Math.PI) + 180) / 90) + 3) % 4;
         //eventType = e.type,//
       // res = Math.atan2(y, x) / (Math.PI / 180) + 180 ,//试试其他的计算
        // 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);
         //dirName = new Array('上方','右侧','下方','左侧');
        //dirName[direction]
        return direction;
    }







    document.onmousemove = mouseMove;
    function mouseMove(ev)
    {

        var player = document.getElementById("player");
        var img = document.getElementById("img");
        Ev= ev || window.event;
        var res = XYZ(ev,player);
        console.log(res);
         if(ev.toElement.id=="player" || ev.toElement.id=="img"){
//“0,1,2,3”分别对应着“上，右，下，左”
              switch (res){
                  case 0:
                      //上
                      playerCount -= 0.01;
                      imgCount -= 0.01;
                      if(playerCount>1 || imgCount>1){
                          playerCount -= 0.1;
                          imgCount -= 0.01;
                      }

                      break;
                  case 1:
                      //右
                      playerCount += 0.1;
                      imgCount += 0.01;
                      break;
                  case 2:
                      //下
                      playerCount -= 0.01;
                      imgCount -= 0.01;

                      if(playerCount>1 || imgCount>1){
                          playerCount -= 0.1;
                          imgCount -= 0.01;
                      }
                      break;
                  case 3:
                      //左
                      playerCount -= 0.01;
                      imgCount -= 0.01;

                      if(playerCount>1 || imgCount>1){
                          playerCount -= 0.1;
                          imgCount -= 0.01;
                      }
                      break;
              }

             player.style.transform = " scale(1) translate("+  playerCount +"px, 0px) rotate(0deg)";
             img.style.transform = " scale(1) translate("+ imgCount +"px, 0px) rotate(0deg)";

         }
    }

标签：鼠标,playerCount,imgCount,0.01,js,player,180,Math,指针
来源： https://blog.csdn.net/qq_41133921/article/details/119906488

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。