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


Posted in Javascript onFebruary 01, 2018

本文实例讲述了原生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>

运行效果:

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用正则获取指定路径文件的名称
Feb 27 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
jQuery each()小议
Mar 18 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JS获取html对象的几种方式介绍
Dec 05 Javascript
js与jQuery 获取父窗、子窗的iframe
Dec 20 Javascript
javascript常用方法汇总
Dec 02 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
JavaScript布尔运算符原理使用解析
May 06 Javascript
详解JSON.parse和JSON.stringify用法
Feb 18 Javascript
Vue组件之自定义事件的功能图解
Feb 01 #Javascript
微信小程序三级联动选择器使用方法
May 19 #Javascript
jquery应用实例分享_实现手风琴特效
Feb 01 #jQuery
使用JS模拟锚点跳转的实例
Feb 01 #Javascript
微信小程序实现图片预览功能
Jan 31 #Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 #Javascript
微信小程序实现MUI数字输入框效果
Jan 31 #Javascript
You might like
php面向对象全攻略 (十一)__toString()用法 克隆对象 __call处理调用错误
2009/09/30 PHP
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
PHP实现的操作数组类库定义与用法示例
2019/05/24 PHP
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
Javascript函数式编程简单介绍
2015/10/11 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
jquery实现瀑布流效果 jquery下拉加载新数据
2016/12/12 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
iView-admin 动态路由问题的解决方法
2018/10/03 Javascript
浅谈ng-zorro使用心得
2018/12/03 Javascript
node.js学习笔记之koa框架和简单爬虫练习
2018/12/13 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
python网络编程实例简析
2014/09/26 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python 使用值来排序一个字典的方法
2018/11/16 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
python爬虫租房信息在地图上显示的方法
2019/05/13 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
python属于软件吗
2020/06/18 Python
HTML5学习笔记之html5与传统html区别
2016/01/06 HTML / CSS
英国最大的女性服装零售商:Dorothy Perkins
2017/03/30 全球购物
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
Charles&Keith美国官方网站:新加坡快时尚鞋类和配饰零售商
2019/11/27 全球购物
教师民族团结演讲稿
2014/08/27 职场文书
感恩教师节主题班会
2015/08/12 职场文书
小学语文教学反思范文
2016/03/03 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书