JavaScript高级学习之彩色小球球
Posted 前端纸飞机
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript高级学习之彩色小球球相关的知识，希望对你有一定的参考价值。
js实现小球跟随鼠标移动
相信有很多朋友们，都没有见过这个库吧，也许你知道jQuery、bootstrap等等，但是这个说实话我也是最近才用到的，Underscore.js是一个javascript实用库，提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象，Underscore提供了100多个函数,包括常用的: map, filter, invoke当然还有更多专业的辅助函数,如:函数绑定, JavaScript模板功能,创建快速索引, 强类型相等测试, 等等。
这是实现的效果。
首先大家需要知道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);
;
还有一个大家可以去官网下载的包，上面有官网地址哦！！！
来源：小莉爱编程
网址：https://blog.csdn.net/qq_45018844/article/details/112258048
以上是关于JavaScript高级学习之彩色小球球的主要内容，如果未能解决你的问题，请参考以下文章