萤火虫效果 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            body,html{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #bg{
                width: 100%;
                height: 100%;
                background: url(img/bg1.jpg)no-repeat center;
                background-size: cover;
            }
            img{
                display: block;
                width: 12px;
                height: 12px;
                position: fixed;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="bg"></div>
        <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        window.onload = function(){
            var fireBeetle = [];
            for (var i=0;i<30;i++) {
                fireBeetle[i] = new Firebeetle();
                fireBeetle[i].posi().big().speed().show().posi().fly();
            }
        }
            function Firebeetle(){
                this.oBg = document.getElementById("bg");
                this.img =document.createElement('img');
                this.oBg.appendChild( this.img );
            };
            Firebeetle.prototype.show = function(){//显示萤火虫
                this.img.src = 'img/star.jpg';
                this.img.style.left = this.posiX + 'px';
                this.img.style.top  = this.posiY + 'px';
                this.img.style.width = this.wid + 'px';
                this.img.style.height  = this.hei + 'px';
                return this;
            };
            Firebeetle.prototype.randomNum = function( num ){//随机数
                return Math.floor(Math.random()*num);
            }
            Firebeetle.prototype.posi = function(){//随机位置
                this.posiX = this.randomNum( window.innerWidth - 100);
                this.posiY = this.randomNum( window.innerHeight - 100);
                return this;
            };
            Firebeetle.prototype.big = function(){//随机大小
                this.wid = this.randomNum( 20 ) + 5;
                this.hei = this.randomNum( 20 ) + 5;
                return this;
            }
            Firebeetle.prototype.speed = function(){//随机速度
                this.speedNum =( this.randomNum( 10 ) + 5 ) *1000;
                return this;
            };
            Firebeetle.prototype.fly = function(){//动起来
                var This = this;
                this.img.move({'top':this.posiY,'left':this.posiX},this.speedNum,function(){
                    This.posi().speed().fly();
                });
            };
        </script>
    </body>
</html>

 

posted @ 2017-08-22 16:12  张正-博客园  阅读(260)  评论(0)    收藏  举报