有意思的效果——摇曳的萤火虫

Posted 2020-08-27 起个好名字

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有意思的效果——摇曳的萤火虫相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            img{border: 0;position:absolute;width: 20px;height: 20px;}
            body{background: url(img/img/bg.jpg);}
        </style>
    </head>
    <script src="js/jquery-1.11.3.js"></script>
    <script>

    
        $(function(){
            var count=100;
            var aa=document.getElementById("a")
    for(var j=0;j<count;j++){
                var img=document.createElement("img")
                img.src="img/img/1.jpg" 
                aa.appendChild(img)
            }
                a=Math.random()*1500
                b=Math.random()*700
            $("img").css({left:a,top:b})
                    
                $("img").animate({left:Math.random()*300,top:Math.random()*300},1000,function(){
                    var timmer=setInterval(function(){
                        for(var i=0;i<count;i++){
                            c=Math.random()*1200
                            d=Math.random()*650
                            sp=Math.random()*2000+2000
                            $("img").eq(i).animate({left:c,top:d},sp)
                            
                        }
                    
                },5000)
                    
                })
        })

    </script>
    <body>
    <div id="a"></div>
    
                                    
        
    
    </body>
</html>

以上是关于有意思的效果——摇曳的萤火虫的主要内容，如果未能解决你的问题，请参考以下文章

在这个 spark 代码片段中 ordering.by 是啥意思？