谁会拒绝一个跟着鼠标的网页小宠物呢？

前言

[Html+Css+Js]制作鼠标跟踪效果，谁会拒绝一个跟着鼠标的网页小宠物呢？

在B站刷到这个视频，感到很有趣就拿了源码，现在我在这里分享一下！

CSS

/* Mouse-follow */

 * {

            margin: 0;

            padding: 0;

        }

        .img{

            width: 50px;

            height: 50px;

            position: absolute;

            background-image: url('https://miao.lsy041.com/wp-content/uploads/2023/05/20230507095145326.gif');

            background-size: cover;

        }

JS

//Mouse-follow
        let img = document.querySelector('.img')
        // 定义小图片的旋转角度
        let deg = 0
        // 定义小图片位于网页左侧的位置
        let imgx = 0
        // 定义小图片位于网页顶部的位置
        let imgy = 0
        // 定义小图片x轴的位置
        let imgl = 0
        // 定义小图片y轴的位置
        let imgt = 0
        // 定义小图片翻转的角度
        let y = 0
        // 定义一个计数器
        let index = 0

        window.addEventListener('mousemove',function(xyz){
            // 获取网页左侧距离的图片位置
            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
            index= 0
            // 定义当前鼠标的位置
            let x = event.clientX
            // 当鼠标的x轴大于图片的时候，提普安就要对着鼠标，所以需要将图片翻转过来
            // 否则就不用翻转
            if(img.offsetLeft<x){
                y=-180
            }else{
                y=0
            }
        }))     imgl+=imgx/50
                imgt+=imgy/50
            }
            img.style.left = imgl+"px"
            img.style.top = imgt+"px"
        },10)

位于</body>之前

<!-- Mouse-follow -->
<div class="img mb20 hidden-xs" onclick="window.location.href='/cha-meal';"></div>

onclick=”window.location.href=’/cha-meal’;可以删除，这个是点击后跳转其他页面/cha-meal为点击后跳转的地址

可能会遇到的问题

问：up！up！网页比较长可以向下划拉，发现向下划网页的时候小羊还是只能停留在前面一部分，下不来，这个要怎么改呀，想用这个效果太可爱了！​

答：在​事件监​听函数里面在imgy那加上window.pageYOffset（滚动高度）就可以了

解决方案2：imgx的值加上window.pageXOffset，imgy里也加上window.pageYOffset
然后下面的img.​styl​e.left和im​styl​ele.top也分别加上这两个值就行了​​

最后就是图片素材