前端开发萤火虫效果

python前端开发教程 pdf
前端实例开发教程
嵌入式前端开发视频教程

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title></title>
        <style type=”text/css”>
            * {
                margin: 0;
                padding: 0;
            }
            #bg {
                width: 100%;
                height: 100%;
                background: black url(img/bg.jpg) no-repeat center;
                position: fixed;
                background-size: cover;
            }
            .xx {
                width: 18px;
                height: 18px;
                position: absolute;
                color: white;
            }
        </style>
    </head>
    <body>
        <div id=”bg”></div>
        <script
            type=”text/javascript”
            src=”http://libs.baidu.com/jquery/1.9.1/jquery.min.js
        ></script>
        <script type=”text/javascript”>
            function Fireworm() {
                //萤火虫构造器
                this.element = $(“<div class=’xx’>*</div>”)
            }
            Fireworm.prototype.show = function() {
                //显示
                this.element.css({
                    top: this.pointY + ‘px’,
                    left: this.pointX + ‘px’,
                })
                $(‘body’).append(this.element)
                return this
            }
            Fireworm.prototype.newPoint = function() {
                //随机位置
                this.pointX = randomInt(window.innerWidth – 100) //获取宽度
                this.pointY = randomInt(window.innerHeight – 100) //获取高度
                return this //为了继续使用后面的方法
            }
            Fireworm.prototype.speed = function() {
                //速度
                //0 – 9 5000-14000毫秒
                this.speedRun = (randomInt(10) + 5) * 1000
                //alert(this.speedRun)
                return this
            }
            Fireworm.prototype.fly = function() {
                //飞
                var self = this
                this.element.animate(
                    { top: this.pointY, left: this.pointX },
                    this.speedRun,
                    function() {
                        self.speed()
                            .newPoint()
                            .fly()
                    },
                )
            }
            function randomInt(max) {
                //随机生成一个整数
                // 0 <= randomInt < max
                return Math.floor(Math.random() * max)
            }
            $(function() {
                var totle = 30
                var fireworm = []
                for (var i = 0; i < totle; i++) {
                    fireworm[i] = new Fireworm()
                    fireworm[i]
                        .newPoint()
                        .show()
                        .speed()
                        .newPoint()
                        .fly()
                }
            })
        </script>
    </body>
</html>
web前端开发教程 百度网盘
web前端开发pdf教程下载
ios前端开发教程
» 本文来自:前端开发者 » 《前端开发萤火虫效果》
» 本文链接地址:https://www.rokub.com/6937.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!