HTML結構

<div id="ball"></div>

Css樣式

<style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
        }

        #ball {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
</style>

Js代碼

// Underscore是一個類庫,上面有好多方法,網上可以下載到
<script src="js/Underscore-min.js"></script>
// 外鏈一個面向對象文件
<script src="js/ColorBall.js"></script>
/**
 * 1.構造函數
 * @param option 可選參數
 * @constructor
 */

function ColorBall(option) {
    this._init(option);
}


/**
 * 2.構造函數的原型庫
 * @type {{constructor: ColorBall}}  構造器:構造函數
 */

ColorBall.prototype = {

    // 獲得當前構造函數
    constructor: ColorBall,

    // 1. 添加屬性
    _init: function (option) {
        var option = option || {};
        // 1.1 必要的屬性
        this.parentId = option.parentId;
        this.x = option.x || 0;
        this.y = option.y || 0;
        this.r = 60;
        this.bgColor = option.bgColor || 'green';

        // 1.2 變化的屬性
        this.dX = _.random(-5, 5);
        this.dY = _.random(-5, 5);
        this.dR = _.random(1, 3);

        // 1.3 把實例化的小球裝入數組
        ballArr.push(this);
    },

    // 2. 繪制小球
    render: function () {

        // 2.1 創建節點
        var parentNode = document.getElementById(this.parentId);
        var childNode = document.createElement('div');
        parentNode.appendChild(childNode);

        // 2.2 設置定位
        parentNode.style.position = 'relative';
        childNode.style.position = 'absolute';

        // 2.3 設置屬性
        childNode.style.left = this.x + 'px';
        childNode.style.top = this.y + 'px';
        childNode.style.width = this.r + 'px';
        childNode.style.height = this.r + 'px';
        childNode.style.borderRadius = '50%';
        childNode.style.backgroundColor = this.bgColor;
    },

    // 3. 小球開始運動
    update: function () {

        // 3.1 小球位置的變化軌跡
        this.x += this.dX;
        this.y += this.dY;
        this.r -= this.dR;

        // 3.2 判斷半徑值
        if (this.r < 0) {
            this.r = 0;

            // 如果小球的半徑小于0的話 就把小球移除數組
            ballArr = _.without(ballArr, this);
        }
    }
}


<script>
    // 1. 獲取標簽
    var ball = document.getElementById('ball');

    // 2. 定義小球數組和顏色數組
    var ballArr = [];
    var colorArr = ['pink', 'red', 'purple', 'blue', 'green', 'orange', 'skyblue', 'white'];

    // 3. 創建小球裝入數組
    ball.onmousemove = function (event) {
        var event = event || window.event;
        new ColorBall({
            parentId: 'ball',
            x: event.clientX,
            y: event.clientY,
            bgColor: colorArr[_.random(0, colorArr.length - 1)]
        });
    }

    // 4. 開始定時器
    setInterval(function () {
        // 4.1 先把創建的div清屏
        for (var i = 0; i < ball.children.length; i++) {
            ball.removeChild(ball.children[i]);
        }

        // 4.2 繪制小球和小球的動畫
        for (var i = 0; i < ballArr.length; i++) {
            ballArr[i].render();
            ballArr[i].update();
        }
    }, 50);
</script>

特效展示

五彩小球