web前端-五彩小球效果

首先我们来看下效果图, 主要的还是思想 Demo地址

五彩小球

接下来我们说下原理

1. 鼠标移动的时候在鼠标位置创建小球, 对小球的颜色进行随机取色.
2. 创建小球的时候设置小球的属性, 包括定位, 颜色, 边框
3. 添加到body中
4. 添加到body中之后, 开始执行小球隐藏的动画.(把宽和高设置成0)
5. 在执行隐藏小球的动画的时候我们还需要设置小球隐藏的时候向哪个方向移动 , 通过随机取方向.
6. 当隐藏小球的动画执行完成之后 , 我们需要把小球在dom中移除

代码如下:
CSS

html,body{
  height:100%;
  width:100%;
  overflow:hidden;
  background-color:#000;
}

JS, 注意: 此js代码中使用到了underscore.js库, underscorejs地址

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 > 100){ // 当小球创建了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();
}

以上代码供大家共勉.