JS实现的多个彩色小球跟随鼠标移动动画效果示例

朱雀 2021-12-12 07:29 232阅读 0赞

p \{  
border-radius: 50%;  
width: 30px;  
height: 30px;  
position: absolute;  
text-align: center;  
line-height: 30px;  
color: white;  
\}

//创建数组存储所有的小球  
var balls = \[\];  
//创建小球函数  
function createballs()\{  
for (var i = 0;i < 60;i++) \{  
var ball = document.createElement(“p”);  
ball.innerHTML = i + 1;  
ball.style.backgroundColor = randomColor();  
//将创建的小球存储到数组中  
document.body.appendChild( ball);  
//将所有的小球存在数组中  
balls.push( ball);  
\}  
\}  
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 = function(e)\{  
var eventObj = e || event;  
for(var i = balls.length - 1;i > 0;i–)\{  
//将小球的下标通过for循环进行传递  
balls\[i\].style.left = balls\[i - 1\].style.left;  
balls\[i\].style.top= balls\[i - 1\].style.top;  
\}  
//将第一个小球赋值为最新的事件对象中的坐标  
balls\[0\].style.left = eventObj.clientX + “px”;  
balls\[0\].style.top= eventObj.clientY + “px”;  
\}

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js实现跟随鼠标移动的小球------Sestid

下就是全部代码（纯Js） <!DOCTYPE html> <html> <head> <title>follow mouse<...

我会带着你远行/ 2024年04月18日 21:53/ 0 赞/ 20 阅读

相关 JS制作跟随鼠标移动的图片

JS制作跟随鼠标移动的图片有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_

今天药忘吃喽~/ 2024年03月31日 15:42/ 0 赞/ 37 阅读

相关 JavaScript canvas实现跟随鼠标移动小球

本文实例为大家分享了js跟随鼠标移动小球的具体代码，供大家参考，具体内容如下 1 2 3 4 5 6 7 8 9 10 11 12

冷不防/ 2022年10月29日 07:51/ 0 赞/ 161 阅读

相关 Android开发——自定义View之实现跟随手指移动的小球

案例： ![Center][] 实现的功能：手指在屏幕上滑动，红色的小球始终跟随手指移动。实现的思路： 1）自定义View，在onDraw中画圆作为小球； 2）

忘是亡心i/ 2022年06月06日 07:06/ 0 赞/ 414 阅读

相关 jQuery_鼠标跟随效果

鼠标跟随效果： HTML： <body> <img src="images/ts.gif" alt=""> </body> JS： $

Dear 丶/ 2022年05月20日 23:55/ 0 赞/ 193 阅读

相关 js鼠标跟随特效鼠标滑过出现小星星动画

页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

约定不等于承诺〃/ 2022年05月17日 20:04/ 0 赞/ 344 阅读

相关 JS实现的多个彩色小球跟随鼠标移动动画效果示例

p \{ border-radius: 50%; width: 30px; height: 30px; position: absolute; text-a

朱雀/ 2021年12月12日 07:29/ 0 赞/ 233 阅读

相关 js小效果之跟随鼠标移动的小球

<!DOCTYPE html> <html> <head> <title>follow mouse</title> </head

落日映苍穹つ/ 2021年09月30日 15:54/ 0 赞/ 316 阅读

相关网站动态背景粒子线条跟随鼠标移动，吸附鼠标效果代码

> 说明作者：姜成SEO 原文链接：[https://blog.csdn.net/qq\_40223005/article/details/80810695][https

Myth丶恋晨/ 2021年09月22日 00:54/ 0 赞/ 433 阅读

相关 JS好看的鼠标跟随彩色气泡效果（附代码）

JS好看的鼠标跟随彩色气泡效果（附代码）

红太狼/ 2020年06月22日 14:02/ 0 赞/ 582 阅读