首页 > 代码库 > 有意思的效果——摇曳的萤火虫

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

2024-09-01 00:58:41   211人阅读

<!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>

 

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


联系
我们