介绍 JS是什么 & lt; ! DOCTYPE html>
& lt; html>
,& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能title>小球运动& lt;/title>
& lt;才能style 类型=拔谋?css"比;
,,p {
,,,这个特性:,50%;
,,,宽度:,30 px;
,,,身高:,30 px;
,,,位置:,绝对;
,,,text-align:,中心;
,,,行高:,30 px;
,,,颜色:,白色;
,,}
& lt;才能/style>
,& lt;/head>
,& lt; body>
,& lt;/body>
,& lt; script 类型=拔谋?javascript"比;//才能创建数组存储所有的小球
var 才能;balls =, [];//才能创建小球函数
function 才能;createballs () {
,,for (var 小姐:=,0;小姐:& lt;, 60,我+ +),{
,,,var ball =, document.createElement (“p");
,,,,ball.innerHTML =,小姐:+,1;
,,,,ball.style.backgroundColor =, randomColor ();
,,,//将创建的小球存储到数组中
,,,document.body.appendChild(,球);
,,,//将所有的小球存在数组中
,,,,balls.push(,球);
,,}
,,}
createballs才能();//才能随机函数
function 才能;randomNum (m, n), {
,,return Math.floor (math . random (), *, (n 安康;m +, 1), +, m);
,,}//才能随机颜色
function 才能;randomColor (), {
,,return “rgb (“, +, randomNum (0, 255), +,,,,, +, randomNum (0, 255), +,,,,, +, randomNum (0, 255), +,“)“;
,,}
document.onmousemove 才能=,函数(e) {
,,var eventObj =, e | |,事件;
,,(var 小姐:=,balls.length 作用;1;小姐:祝辞,0;我——){
,,,//将小球的下标通过对循环进行传递
,,,,球[我].style.left =,球[小姐,安康;1].style.left;
,,,,球[我].style.top=,球[小姐,安康;1].style.top;
,,}
,,//将第一个小球赋值为最新的事件对象中的坐标
,,,球[0].style.left =, eventObj.clientX +,“px";
,,,球[0].style.top=, eventObj.clientY +,“px";
,,}
,& lt;/script>
& lt;/html>
这篇文章将为大家详细讲解有关原生JS如何实现的多个彩色小球跟随鼠标移动动画效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
JS是JavaScript的简称,它是一种直译式的脚本语言,其解释器被称为JavaScript引擎,是浏览器的一部分,主要用于web的开发,可以给网站添加各种各样的动态效果,让网页更加美观。
具体如下:
<强>实现方法:
每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果
<强>实现代码:
<强>运行效果:
关于“原生JS如何实现的多个彩色小球跟随鼠标移动动画效果”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
