【JavaScript】图片跟随鼠标移动显示一串轨迹

Acrgi

已于 2023-03-10 09:34:28 修改

阅读量202

点赞数

文章标签： javascript 前端 html

于 2023-03-10 08:45:36 首次发布

本文链接：https://blog.csdn.net/Acrgi/article/details/129435183

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        img{
            width:100px;
            height:100px;
            position: absolute;
        }
        div{
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: red;
            border-radius: 50%;
        }
    </style>
    <script>
        window.onload = function(){
            var oImg = document.getElementById("img");
            var oDiv = document.getElementsByTagName("div");
            document.onmousemove = function(ev){
                var e = ev || window.event;
                var hc = oImg.offsetWidth;
                oImg.style.left = e.clientX - parseInt(hc/2) + "px";
                oImg.style.top = e.clientY - parseInt(hc/2) + "px";

                for(var i = oDiv.length - 1; i > 0; i--){
                    oDiv[i].style.left = oDiv[i - 1].offsetLeft + "px";
                    oDiv[i].style.top = oDiv[i - 1].offsetTop + "px";
                }
                
                oDiv[0].style.left = e.clientX + parseInt(hc/2) +"px";
                oDiv[0].style.top = e.clientY + parseInt(hc/2) +"px";
            }
        }

    </script>
</head>
<body>
    <img src="img\威特小金人.png" id = "img">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>