8.2让图片跟随鼠标的移动而移动或旋转

   <div class="img"></div>

    <style>
        /* *：通配符，意思是所有的标签都有的属性。 */
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: rgb(254,249,237);
        }
        .img{
            width: 240px;
            height: 160px;
            position: absolute;
            /* 将图片作为背景 */
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202007%2F19%2F20200719223736_sfgmw.thumb.1000_0.gif&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662018901&t=7b0520f8d678445a6d3bd62f87bff7fe);
            /* cover：保持图像的宽高比例，将图片缩放到正好【完全覆盖】定义的背景区域，保证长或宽的其中一边与图片相同
            contain：保持图像的宽高比例，将图片缩放到整个图片【完整进入】定义背景的区域空出来的区域出现平铺 */
            background-size: contain;
            /* 背景平铺： 不重复背景图像 */
            background-repeat: no-repeat;
        }
    </style>

    <script>
        // 获取img
        let img=document.querySelector(".img")
        // 图片角度旋转的角度
        let deg=0
        let imgx=0
        let imgy=0
        let imgl=0
        let imgt=0
        let y=0
        let index=0
        window.addEventListener("mousemove",function(xyz){
            //除2是为了让图片位于鼠标中心时不会移动
            imgx=xyz.x-img.offsetLeft-img.clientWidth/2;
            imgy=xyz.y-img.offsetTop-img.clientHeight/2;
            deg=360*Math.atan(imgy/imgx)/(2*Math.PI);
            index=0;
            let x=event.clientX;
            if(img.offsetLeft<x){
                y=-180
            }else{
                y=0
            }


        })
        // 箭头函数
        setInterval(()=>{
            img.style.transform="rotateZ("+deg+"deg) rotateY("+y+"deg)"
            index++
            if(index<50){
                imgl+=imgx/50
                imgt+=imgy/50
            }
            img.style.left=imgl+'px'
            img.style.top=imgt+'px'

        },1)

    </script>