js 图片视频跟着鼠标指针 “左右” 动

    var playerCount = 0;
    var imgCount = 0;
    /*
    * @description:计算鼠标的方向
    * @param:浏览器属性，元素
    * @author:aleck
    * @create:2021/08/25
    *
    * */
    function XYZ(e,player){
        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;
    }




    var player = document.getElementById("player");
    var img = document.getElementById("img");
    player.addEventListener('mousemove',mouseMove,false);
    img.addEventListener('mousemove',mouseMove,false);
    function mouseMove(ev)
    {
        Ev= ev || window.event;
        var res = XYZ(ev,player);
       // console.log(res);
//“0,1,2,3”分别对应着“上，右，下，左”
              switch (res){
                  case 0:
                  case 2:
                  case 3:
                      //左
                      playerCount -= 0.0009;
                      imgCount -= 0.0001;
                      if(playerCount>1 || imgCount>1){
                          playerCount -= 0.02;
                          imgCount -= 0.01;
                      }
                      break;
                  case 1:
                      //右
                      playerCount += 0.009;
                      imgCount += 0.002;
                      break;
              }

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