物体随着鼠标点击移动

最新推荐文章于 2024-07-30 16:49:30 发布

AALP

最新推荐文章于 2024-07-30 16:49:30 发布

阅读量193

点赞数

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_47216606/article/details/121589733

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下面的图片地址可以换成自己想要的图片地址，代码如下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            height: 20000px;
        }
        img{
            vertical-align: top;
        }
        #pic{
            position: absolute;
            left: 0;
            top: 0;
        }
        #pic img{
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div id="pic">
        <img src="./img/player_right.gif" alt="" />
    </div>
</body>
</html>
<script>
    var pic = document.getElementById("pic");
    var startX = 0,endX=0;
    var startY = 0,endY=0;
    document.onclick = function (event) {
        var event = event || window.event;
        endX = event.pageX - pic.offsetWidth / 2;
        endY = event.pageY - pic.offsetHeight / 2;
        setInterval(function () {
            startX = startX + (endX-startX)/10;
            startY = startY + (endY-startY)/10;
            pic.style.left = startX + "px";
            pic.style.top = startY + "px";
        },30);

    }
</script>

AALP

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
物体随着鼠标点击移动

下面的图片地址可以换成自己想要的图片地址，代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } body{
复制链接

扫一扫