原生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
|