原生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 相关文章推荐
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
js调用打印机打印网页字体总是缩小一号的解决方法
Jan 24 Javascript
jQuery实现带动画效果的多级下拉菜单代码
Sep 08 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
微信小程序 页面跳转传递值几种方法详解
Jan 12 Javascript
javascript数据类型详解
Feb 07 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
Jul 06 Javascript
vue.js数据绑定操作详解
Apr 23 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
ant design的table组件实现全选功能以及自定义分页
Nov 17 Javascript
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
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生成UTF8文件的方法
2010/05/15 PHP
浅谈PHP调用Webservice思路及源码分享
2014/06/04 PHP
详解PHP的Yii框架中自带的前端资源包的使用
2016/03/31 PHP
jquery+thinkphp实现跨域抓取数据的方法
2016/10/15 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
php在linux环境中如何使用redis详解
2020/12/15 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
2016/06/13 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
javascript 解决浏览器不支持的问题
2016/09/24 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
微信小程序wx.navigateTo方法里的events参数使用详情及场景
2020/01/07 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
在Python中字符串、列表、元组、字典之间的相互转换
2019/11/15 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python drf各类组件的用法和作用
2021/01/12 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
技术总监的工作职责
2013/11/13 职场文书
公司年会主持词
2014/03/22 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
Python超详细分步解析随机漫步
2022/03/17 Python
Python之matplotlib绘制折线图
2022/04/13 Python