原生JavaScript实现五色小球

原生JavaScript实现五色小球

一，HTML代码

<div id="ball"></div>
<script src="underscore.js"></script>  <!--Underscore.js 1.9.1  --- 这里需要添加一个 js 库，网上直接搜索就可以找到下载了-->

二，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属性方法, 创建小球的方法, 渲染到页面上的方法
    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);// 其他浏览器下
            }
        },
        // 创建小球
        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);
            // 当我们添加完成之后开始执行动画并移除小球
            this.removeBall(b);
        },
// 执行动画清除小球的方法
        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)),// 设置小球随机移动的x轴位置
                    top: this.top   parseInt(Math.random() * (rt > 0.5 ? 200 : -200))// 设置小球随机移动的y轴位置
                }, function() {
                    document.body.removeChild(ballObj);// 当动画执行完毕之后 , 移除小球
                })
            }.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) { // 当小球创建了100个, 则不再创建
            return false;
        }
        var event = event || window.event;
        var x = event.clientX   _.random(-5, 5);// 获取一个-5到5的随机数
        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();
    }

四，实现效果

来源：https://www./content-1-374851.html