js实现拖影效果

最新推荐文章于 2024-05-25 15:33:11 发布

yl107

最新推荐文章于 2024-05-25 15:33:11 发布

阅读量1.6k

点赞数

分类专栏： js js动态效果练习

本文链接：https://blog.csdn.net/yl107/article/details/71469112

版权

js 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

js动态效果练习

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖影</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        div{
            /*width: 10px;
            height: 10px;*/
            border-radius: 50%;
            /*background-color: red;*/
            position: absolute;
            left:100px;
            top:100px;
        }
    </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>
    <script>
        var divs = document.getElementsByTagName('div');
        // 设置随机数
        function rand(min,max){
            return parseInt(Math.random()*(max - min + 1) + min);
        }
        for(var i=0; i<divs.length; i++){
            // 设置背景色
            divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')' 
            // 设置大小
            divs[i].style.width = i * 4 + 'px';
            divs[i].style.height = i * 4 + 'px';
        }
        document.onmousemove = function(e){
            var e = e || window.event;
            for(var i=0; i<divs.length; i++){
                // 设置背景色
                divs[i].style.backgroundColor = 'rgb(' + rand(0,255) + ',' + rand(0,255) + ',' + rand(0,255) + ')' ;
            }
            var i = -1;
            var time = setInterval(function(){
                i++;
                if(i >= divs.length - 1){
                    clearInterval(time);
                }
                divs[i].style.left = e.clientX - divs[i].clientWidth / 2 + 'px';
                divs[i].style.top = e.clientY - divs[i].clientHeight / 2 + 'px';
            },100);
        }
    </script>
</body>
</html>