萤火虫动画效果实现-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    html, body {
        width: 100%;
        height: 100%;
        background: url(images/w.jpg) no-repeat center;
        background-size: cover;
        overflow: hidden;
        position: relative;
    }

    img {
        position: absolute;
        width: 38px;
        height: 38px;
        /*left:100px;
        top:100px;*/
    }
</style>
<body>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    function createFirefly() {
        var firefly = new Object();
        firefly.element = $("<img src = 'images/6.png'/>");
        firefly.show = function () {
            this.element.css({
                "top": this.showPoint().pointY,
                "left": this.showPoint().pointX
            });
            $("body").append(this.element);
        };
        firefly.showPoint = function () {
            var pointY = Math.abs(Math.random() * window.innerHeight - 18) + "px",
                pointX = Math.abs(Math.random() * window.innerWidth - 18) + "px";
            return {
                "pointY": pointY,
                "pointX": pointX
            }
        };
        firefly.flyTime = function () {
            var flyTime = Math.floor((Math.random() * 3 + 2) * 1000);
            return flyTime;
        };
        firefly.run = function () {
            var self = this;
            console.log(self);
            
            var animateMove=  self.element.animate({
                left: self.showPoint().pointX,
                top: self.showPoint().pointY,
            }, self.flyTime(),function () {
                self.run();
            });
        };
        return firefly
    }

    for (var i = 0; i < 20; i++) {
        var fire1 = createFirefly();
        fire1.show();
        fire1.run();
    }

    function show(n) {
        var arr = [];
        console.log('1');
        return (function fn() {
            arr.unshift(n);
            n--;
            console.log(arr);
            if (n != 0) {
                fn();
            }
            return arr;

        })()
    }
    console.log(show(5));
// /*********************************************************************************************************/
    //
    // //面向对象，模拟java
    // function Firefly() {
    //     this.element = $("<img src = 'img/1.jpg'/>");
    //     this.setPointX = function (value) {
    //         this.pointX = value;
    //     };
    //     this.getPointX = function () {
    //         return this.pointX;
    //     };
    //     this.setPointY = function (value) {
    //         this.pointY = value;
    //     };
    //     this.getPointY = function () {
    //         return this.pointY;
    //     };
    //     this.setRunTime = function (value) {
    //         this.runtime = value;
    //     };
    //     this.getRunTime = function () {
    //         return this.runtime;
    //     }
    // }
    //
    // Firefly.prototype.show = function () {
    //     this.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px");
    //     this.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px");
    //     this.element.css({
    //         left: this.getPointX(),
    //         top: this.getPointY()
    //     });
    //     $("body").append(this.element);
    // };
    // Firefly.prototype.run = function () {
    //     //alert(this.flyTime())
    //     var self = this;
    //     this.element.animate({
    //         left: this.getPointX(this.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px")),
    //         top: this.getPointY(this.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px"))
    //     }, this.getRunTime(this.setRunTime(Math.floor((Math.random() * 3 + 2) * 1000))), function () {
    //         self.element.animate({
    //             left: self.getPointX(self.setPointX(Math.abs(Math.random() * window.innerWidth - 18) + "px")),
    //             top: self.getPointY(self.setPointY(Math.abs(Math.random() * window.innerHeight - 18) + "px"))
    //         }, self.getRunTime(self.setRunTime(Math.floor((Math.random() * 3 + 2) * 1000))), arguments.callee);
    //     });
    // };
    // for (var i = 0; i < 20; i++) {
    //     var fire1 = new Firefly();
    //     fire1.show();
    //     fire1.run();
    // }

</script>
js实现飘飘飞舞的虫子
