js实现小球跟随鼠标移动
相信有很多朋友们，都没有见过这个库吧，也许你知道jQuery、bootstrap等等，但是这个说实话我也是最近才用到的，Underscore.js是一个JavaScript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象，Underscore提供了100多个函数,包括常用的: map, filter, invoke当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等。
Underscore官网
这是实现的效果。
首先大家需要知道onmousemove的意思
<div onmousemove="myFunction()">鼠标指针移动到这。</div>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五彩小球</title> <style> *{ margin: 0; padding: 0; list-style: none; } html, body, #box{ width: 100%; height: 100%; } #box{ background-color: #000; } </style> </head> <body> <div id="box"></div> <script src="js/Underscore-min.js"></script> <script src="js/Ball.js"></script> <script> // 1. 获取标签 var box = document.getElementById('box'); // 2. 监听鼠标在盒子上的移动 // 颜色数组 和 小球数组 var colorArr = ['red', 'green', 'blue', 'yellow', 'orange', 'purple', 'pink']; var ballArr = []; box.onmousemove = function (ev1) { var e = ev1 || window.event; // 2.1 创建小球,装入小球数组 var ball = new Ball({ parentId: 'box', left: e.clientX, top: e.clientY, bgColor:colorArr[_.random(0, colorArr.length - 1)] }); ball.render(); ballArr.push(ball); }; // 3. 定时器 setInterval(function () { // 清除上一帧产生的小球 for(var i=0; i<box.children.length; i++){ box.children[i].remove(); } // 绘制小球和让小球移动 for(var j=0; j<ballArr.length; j++){ ballArr[j].render(); ballArr[j].update(); } }, 50); </script> </body> </html>
还有两个js文件：
function Ball(options) { this._init(options); } Ball.prototype = { _init: function (options) { options = options || {}; // 1. 必要的属性 this.parentId = options.parentId; this.left = options.left; this.top = options.top; this.r = 60; this.bgColor = options.bgColor || 'red'; // 2. 小球变化的量 this.dX = _.random(-5, 5); this.dY = _.random(-5, 5); this.dR = _.random(1, 3); }, render: function () { var parentNode = document.getElementById(this.parentId); var childNode = document.createElement('div'); parentNode.appendChild(childNode); childNode.style.position = 'absolute'; childNode.style.left = this.left + 'px'; childNode.style.top = this.top + 'px'; childNode.style.width = this.r + 'px'; childNode.style.height = this.r + 'px'; childNode.style.borderRadius = '50%'; childNode.style.backgroundColor = this.bgColor; }, update: function () { this.left += this.dX; this.top += this.dY; this.r -= this.dR; if(this.r <= 0){ this.r = 0; ballArr = _.without(ballArr, this); } } };
还有一个大家可以去官网下载的包，上面有官网地址哦！！！
