原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018-02-01 08:54
2281 查看
本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果。分享给大家供大家参考,具体如下:
实现方法:
每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果
实现代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style type="text/css"> p { border-radius: 50%; width: 30px; height: 30px; position: absolute; text-align: center; line-height: 30px; color: white; } </style> </head> <body> </body> <script type="text/javascript"> //创建数组存储所有的小球 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"; } </script> </html>
运行效果:
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
您可能感兴趣的文章:
相关文章推荐
- 使用JS实现气泡跟随鼠标移动的动画效果
- 原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
- js实现的跟随鼠标移动的时钟效果(中英文日期显示)
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- 原生js利用鼠标滚轮实现滚动到当前页面实现动画效果
- JS与CSS3实现图片响应鼠标移动放大效果示例
- 原生js实现div随鼠标移动效果
- 原生JS实现多个小球碰撞反弹效果示例
- js实现的跟随鼠标移动的时钟效果(中英文日期显示)
- js实现文字跟随鼠标移动而移动的方法
- 完整的html+css+javascript实现跟随鼠标移动显示选中效果
- 跟随鼠标一起流动的粒子动画 JS 原生代码
- JS实现的鼠标跟随代码(卡通手型点击效果)
- JS实现自定义状态栏动画文字效果示例
- js实现精美的图片跟随鼠标效果实例
- 原生JS实现的雪花飘落动画效果
- 原生js实现jquery函数animate()动画效果的简单实例
- JS实现的鼠标跟随代码(卡通手型点击效果)
- 仿265网址导航logo的两只眼睛跟随鼠标移动js实现方法