美文网首页
元素跟随鼠标移动

元素跟随鼠标移动

作者: lucky_yao | 来源:发表于2020-10-04 18:06 被阅读0次
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            div {
                width: 20px;
                height: 20px;
                background: url(img/戴戴.jpg) no-repeat;
                position: absolute;
                line-height: 20px;
                color: white;
                text-align: center;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </body>
    <script type="text/javascript">
        var odiv = document.getElementsByTagName('div');
        document.onmousemove = function(event) {
            var e = event || window.event;
            for (var i = odiv.length - 1; i > 0; i--) {
                odiv[i].style.left = odiv[i - 1].style.left;
                odiv[i].style.top = odiv[i - 1].style.top;
                odiv[i].style.background = 'rgb(' + parseInt(Math.random() * 255) + ',' + parseInt(Math.random() * 255) + ',' +parseInt(Math.random() * 255) + ')';
                odiv[i].innerHTML=parseInt(Math.random()*10)
            }
            odiv[i].style.left = e.clientX - 10 + 'px';
            odiv[i].style.top = e.clientY - 10 + 'px';
        }
    </script>
</html>

相关文章

网友评论

      本文标题:元素跟随鼠标移动

      本文链接:https://www.haomeiwen.com/subject/rrfuuktx.html