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

朱雀 2021-12-12 07:29 403阅读 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 条评论，403人围观）

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

相关阅读

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

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

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

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

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

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

相关 JavaScript实现一串div跟随鼠标移动效果（幻影效果）

JavaScript实现一串div跟随鼠标移动效果上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果。现在来讲一个进阶版，实现一串div跟随鼠标

男娘i/ 2023年02月14日 13:14/ 0 赞/ 26 阅读

相关 JavaScript实现div块跟随鼠标移动效果

JavaScript实现div块跟随鼠标移动效果前面讲了这么多DOM事件有关的属性等，现在我们进行一些相关的练习，实现div块跟随鼠标移动效果，如图： ![在这里插入

快来打我*/ 2023年02月14日 13:14/ 0 赞/ 31 阅读

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

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

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

相关 jQuery_鼠标跟随效果

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

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

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

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

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

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

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

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

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

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

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

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

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

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