JS实现图片跟着鼠标走

最新推荐文章于 2023-09-08 18:50:39 发布

senwei.zhang

最新推荐文章于 2023-09-08 18:50:39 发布

阅读量996

点赞数 1

分类专栏： HTML+CSS+JS

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

版权

HTML+CSS+JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

效果图

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>

senwei.zhang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现图片跟着鼠标走

效果图code:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片跟着鼠标走</title> <style> img { width: 9...
复制链接

扫一扫