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

前言

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

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

位于</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也分别加上这两个值就行了​​

最后就是图片素材

文章来源 谁会拒绝一个跟着鼠标的网页小宠物呢？ – 萌喵论坛 (miaoi.top)

感谢您的访问，Ctrl+D收藏本站吧。