18 - 五彩小球 - 面向?qū)ο?/h2>

---

HTML結(jié)構(gòu)

<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是一個類庫,上面有好多方法,網(wǎng)上可以下載到
<script src="js/Underscore-min.js"></script>
// 外鏈一個面向?qū)ο笪募?<script src="js/ColorBall.js"></script>
/**
 * 1.構(gòu)造函數(shù)
 * @param option 可選參數(shù)
 * @constructor
 */

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


/**
 * 2.構(gòu)造函數(shù)的原型庫
 * @type {{constructor: ColorBall}}  構(gòu)造器:構(gòu)造函數(shù)
 */

ColorBall.prototype = {

    // 獲得當(dāng)前構(gòu)造函數(shù)
    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 把實例化的小球裝入數(shù)組
        ballArr.push(this);
    },

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

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

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

        // 2.3 設(shè)置屬性
        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的話 就把小球移除數(shù)組
            ballArr = _.without(ballArr, this);
        }
    }
}


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

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

    // 3. 創(chuàng)建小球裝入數(shù)組
    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 先把創(chuàng)建的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>

特效展示

五彩小球

最后編輯于 ：2017.12.05 05:50:09

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。