原生JavaScript實現(xiàn)五色小球

一，HTML代碼

<div id="ball"></div>
<script src="underscore.js"></script>  <!--Underscore.js 1.9.1  --- 這里需要添加一個 js 庫，網(wǎng)上直接搜索就可以找到下載了-->

二，CSS代碼

        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        body{
            width: 100%;
            height:100%;
            background-color: #000000;
        }
        #ball{
            width: 100%;
            height:100%;
            background-color: #000000;
        }

三，JavaScript代碼

 function Ball(options) {
        this._init(options) ;// 初始化小球
    }
    // 給Ball的原型添加初始化方法, 獲取css屬性方法, 創(chuàng)建小球的方法, 渲染到頁面上的方法
    Ball.prototype = {
        // 初始化
        _init: function(options) {
            var option = options || {};
            this.width = option.width || 30;
            this.height = option.height || 30;
            this.left = option.left;
            this.top = option.top;
            this.borderRadius = option.borderRadius || '50%';
            this.backgroundColor = option.backgroundColor || '#0094ff';
        },
        // 獲取css屬性
        getCssAttr:function(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];  // IE下
            } else {
                return window.getComputedStyle(obj,null).getPropertyValue(attr);// 其他瀏覽器下
            }
        },
        // 創(chuàng)建小球
        create: function() {
            var _ball = document.createElement('div');
            _ball.style.position = 'absolute';
            _ball.style.left = this.left   'px';
            _ball.style.top = this.top   'px';
            _ball.style.width = this.width   'px';
            _ball.style.height = this.height   'px';
            _ball.style.borderRadius = this.borderRadius;
            _ball.style.backgroundColor = this.backgroundColor;
            return _ball;
        },
        // 將小球添加到body中
        render: function() {
            var b = this.create();
            document.body.appendChild(b);
            // 當(dāng)我們添加完成之后開始執(zhí)行動畫并移除小球
            this.removeBall(b);
        },
// 執(zhí)行動畫清除小球的方法
        removeBall: function(ballObj) {
            var timer = null;
            clearTimeout(timer);
            timer = setTimeout(function() {
                var rl = Math.random();
                var rt = Math.random();
                this.animate(ballObj, {
                    width: 0,
                    height: 0,
                    left: this.left   parseInt(Math.random() * (rl < 0.5 ? 200 : -200)),// 設(shè)置小球隨機移動的x軸位置
                    top: this.top   parseInt(Math.random() * (rt > 0.5 ? 200 : -200))// 設(shè)置小球隨機移動的y軸位置
                }, function() {
                    document.body.removeChild(ballObj);// 當(dāng)動畫執(zhí)行完畢之后 , 移除小球
                })
            }.bind(this), 100)
        },
// 緩動動畫
        animate: function(obj, dic, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var flag = true;
                for (var key in dic) {
                    var begin = parseInt(this.getCssAttr(obj, key));
                    var target = parseInt(dic[key]);
                    var speed = (target - begin) * 0.2;
                    speed = target > begin ? Math.ceil(speed) : Math.floor(speed);
                    obj.style[key] = begin   speed   'px';
                    if (target != begin) {
                        flag = false;
                    }
                }
                if (flag) {
                    if (fn) {
                        fn();
                    }
                    clearInterval(obj.timer);
                }
            }.bind(this), 60)
        }
    };
    // 清除鼠標點擊事件
    document.onmousedown = function(){
        return false;
    };
    // 鼠標移動事件
    document.onmousemove = function(event) {
        if (document.body.children.length > 200) { // 當(dāng)小球創(chuàng)建了100個, 則不再創(chuàng)建
            return false;
        }
        var event = event || window.event;
        var x = event.clientX   _.random(-5, 5);// 獲取一個-5到5的隨機數(shù)
        var y = event.clientY   _.random(-5, 5);
        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);
        var bgc = 'rgb('   r   ','   g   ','   b   ')';
        var ball = new Ball({
            width: 50,
            height: 50,
            top: y - 25, // 為了保證鼠標在小球中間我們需要減去25
            left: x - 25,
            borderRadius: '50%',
            backgroundColor: bgc
        });
        ball.render();
    }

四，實現(xiàn)效果