码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-01-14 15:49:41      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:math   int   nim   ntb   pos   script   charset   query   mat   

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

 

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

标签:math   int   nim   ntb   pos   script   charset   query   mat   

原文地址:http://www.cnblogs.com/thestudy/p/6285367.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!