JS实现图片跟着鼠标走

效果图

code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片跟着鼠标走</title>
    <style>
        img {
            width: 99px;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<img src="images/img.jpg" id="image">
</body>
</html>
<script>

    var img = document.getElementById("image");
    document.onclick = function (event) {
        targetX = event.clientX  - img.offsetWidth /2;
        targetY = event.clientY - img.offsetHeight /2;
    };

    var leaderX = 0, leaderY = 0, targetX = 0, targetY = 0;
    setInterval(function () {
        leaderX = leaderX + (targetX - leaderX) / 10;
        leaderY = leaderY + (targetY - leaderY) /10;
        img.style.left = leaderX + "px";
        img.style.top = leaderY + "px";
    }, 10);
</script>

来源：CSDN

作者：进阶的民工

链接：https://blog.csdn.net/SoWhatWorld/article/details/104270335

标签

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!