图片跟随鼠标点击走

最新推荐文章于 2022-11-10 11:24:11 发布

python基础教程

最新推荐文章于 2022-11-10 11:24:11 发布

阅读量1.2k

点赞数

分类专栏： 01前端基础教程html_css_js

本文链接：https://blog.youkuaiyun.com/stopcpp/article/details/52812980

版权

01前端基础教程html_css_js 专栏收录该内容

78 篇文章

订阅专栏

要点：利用缓动动画，目标位置的横坐标等于pageX，目标位置的纵坐标等于pageY.

<!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="images/1.jpg" 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>