jquery制作随机弹跳的小球特效-6ren

jquery制作随机弹跳的小球特效

转载作者：qq735679552 更新时间：2022-09-29 22:32:09

27

4

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章jquery制作随机弹跳的小球特效由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

以下是源码:

。

复制代码代码如下:

 
  <!doctype html> 
 
  <html> 
 
  <head> 
 
  <title>HTML5 随机弹跳的小球</title> 
 
  <style> 
 
  body{ 
 
  font-family: 微软雅黑;    
 
  } 
 
  body,h1{ 
 
  margin:0; 
 
  } 
 
  canvas{ 
 
  display:block;margin-left: auto;margin-right: auto; 
 
  border:1px solid #DDD;    
 
  background: -webkit-linear-gradient(top, #222,#111); 
 
  }    
 
  </style> 
 
  </head> 
 
  <body> 
 
  <h1>HTML5特效 随机弹跳的小球</h1> 
 
  <div>请使用支持HTML5的浏览器开打本页。 <button id="stop-keleyi-com">暂停</button> 
 
  <button id="run-keleyi-com">继续</button> 
 
  <button id="addBall-keleyi-com">增加小球</button> <button onclick="javascript:window.location.reload();">刷新</button> 
 
  <br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。 
 
  </div> 
 
  <canvas id="canvas-keleyi-com" > 
 
  </canvas> 
 
  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js"></script> 
 
  <script type="text/javascript"> 
 
  var nimo = { 
 
  aniamted: null, 
 
  content: null, 
 
  data: { 
 
  radiusRange: [5, 20], 
 
  speedRange: [-5, 5], 
 
  scrollHeight: null, 
 
  scrollWdith: null 
 
  }, 
 
  balls: [], 
 
  ele: { 
 
  canvas: null 
 
  }, 
 
  fn: { 
 
  creatRandom: function (startInt, endInt) {//生产随机数 
 
  var iResult; 
 
  iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1))); 
 
  return iResult 
 
  }, 
 
  init: function () { 
 
  nimo.data.scrollWdith = document.body.scrollWidth; 
 
  nimo.data.scrollHeight = document.body.scrollHeight; 
 
  nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-com'); 
 
  nimo.content = nimo.ele.canvas.getContext('2d'); 
 
  nimo.ele.canvas.width = nimo.data.scrollWdith - 50; 
 
  nimo.ele.canvas.height = nimo.data.scrollHeight - 100; 
 
  }, 
 
  addBall: function () { 
 
  var aRandomColor = []; 
 
  aRandomColor.push(nimo.fn.creatRandom(0, 255)); 
 
  aRandomColor.push(nimo.fn.creatRandom(0, 255)); 
 
  aRandomColor.push(nimo.fn.creatRandom(0, 255)); 
 
  var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]); 
 
  var oTempBall = { 
 
  coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius), 
 
  coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius), 
 
  radius: iRandomRadius, 
 
  bgColor: 'rgba(' + aRandomColor[0] + ',' + aRandomColor[1] + ',' + aRandomColor[2] + ',0.5)' 
 
  }; 
 
  oTempBall.speedX = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); 
 
  if (oTempBall.speedX === 0) { 
 
  oTempBall.speedX = 1 
 
  } 
 
  if (oTempBall.speedY === 0) { 
 
  oTempBall.speedY = 1 
 
  } 
 
  oTempBall.speedY = nimo.fn.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]); 
 
  nimo.balls.push(oTempBall) 
 
  }, 
 
  drawBall: function (bStatic) { 
 
  var i, iSize; 
 
  nimo.content.clearRect(0, 0, nimo.ele.canvas.width, nimo.ele.canvas.height) 
 
  for (var i = 0, iSize = nimo.balls.length; i < iSize; i++) { 
 
  var oTarger = nimo.balls[i]; 
 
  nimo.content.beginPath(); 
 
  nimo.content.arc(oTarger.coordsX, oTarger.coordsY, oTarger.radius, 0, 10); 
 
  nimo.content.fillStyle = oTarger.bgColor; 
 
  nimo.content.fill(); 
 
  if (!bStatic) { 
 
  if (oTarger.coordsX + oTarger.radius >= nimo.ele.canvas.width) { 
 
  oTarger.speedX = -(Math.abs(oTarger.speedX)) 
 
  } 
 
  if (oTarger.coordsX - oTarger.radius <= 0) { 
 
  oTarger.speedX = Math.abs(oTarger.speedX) 
 
  } 
 
  if (oTarger.coordsY - oTarger.radius <= 0) { 
 
  oTarger.speedY = Math.abs(oTarger.speedY) 
 
  } 
 
  if (oTarger.coordsY + oTarger.radius >= nimo.ele.canvas.height) { 
 
  oTarger.speedY = -(Math.abs(oTarger.speedY)) 
 
  } 
 
  oTarger.coordsX = oTarger.coordsX + oTarger.speedX; 
 
  oTarger.coordsY = oTarger.coordsY + oTarger.speedY; 
 
  } 
 
  } 
 
  }, 
 
  run: function () { 
 
  nimo.fn.drawBall(); 
 
  nimo.aniamted = setTimeout(function () { 
 
  nimo.fn.drawBall(); 
 
  nimo.aniamted = setTimeout(arguments.callee, 10) 
 
  }, 10) 
 
  }, 
 
  stop: function () { 
 
  clearTimeout(nimo.aniamted) 
 
  } 
 
  } 
 
  } 
 
  window.onload = function () { 
 
  nimo.fn.init(); 
 
  var i; 
 
  for (var i = 0; i < 10; i++) { 
 
  nimo.fn.addBall(); 
 
  } 
 
  nimo.fn.run(); 
 
  document.getElementById('stop-kel'+'eyi-com').onclick = function () { 
 
  nimo.fn.stop() 
 
  } 
 
  document.getElementById('run-keley'+'i-com').onclick = function () { 
 
  nimo.fn.stop() 
 
  nimo.fn.run() 
 
  } 
 
  document.getElementById('addBall-k'+'eleyi-com').onclick = function () { 
 
  var i; 
 
  for (var i = 0; i < 10; i++) { 
 
  nimo.fn.addBall(); 
 
  } 
 
  nimo.fn.drawBall(true); 
 
  } 
 
  } 
 
  </script> 
 
  </body> 
 
  </html>

最后此篇关于jquery制作随机弹跳的小球特效的文章就讲到这里了,如果你想了解更多关于jquery制作随机弹跳的小球特效的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

27

4

0

文章推荐： C++、C语言和JAVA开发的区别

文章推荐： python3实现Dijkstra算法最短路径的实现

文章推荐： C语言与JAVA的区别是什么(推荐)

文章推荐： jQuery实现单击和鼠标感应事件

JavaScript "ball"弹跳
我是一个 JS 菜鸟。我正在进入浏览器游戏编程，并想制作一个球掉落和弹跳的快速示例以供学习。由于某种原因，当我创建 jsfiddle 时，我的代码实际上不起作用，我的 div id="ball"的 o
jQuery 弹跳变体(弹跳)
我正在努力寻找为此目的的插件/插件，它是我项目的关键部分，我忽略了它，现在它咬了我。我需要 jQuery 弹跳的变体，它使 div 无限期地围绕父 div/包装器弹跳。实际上，我将拥有一个屏幕，用
ios - UIView 弹跳？
我的 Nib 底部有一个 UIView。我希望它的高度能够增长，但让它看起来好像它没有移动位置，只是在增长。然后将高度缩小回原来的高度，除了高度之外不进行任何移动。不幸的是，它在 y 位置上反弹。它会
javascript - jquery scrollTop 弹跳
我做错了什么？我的技能栏正在跳舞。加载后我想修复它们。在这里检查我的笔:http://codepen.io/anon/pen/KdEeWW $(window).scroll(function() {
jQuery 在表格单元格内滚动(弹跳)长文本
我有一个有 2 列的表格，其中一列具有设定的宽度，第二列占据页面的其余部分。在第一列中，我有另一个包含 2 个 tr 元素的表(这是由 asp 生成的) 如此处所示的表格:http://jsfidd
jQuery 第三级 SlideToggle 弹跳
我正在使用 jQuery 构建基于标准 ul>li 结构的下拉导航。一切都运行良好，但是，当我到达三元级别项目时，slideToggle 函数会导致“反弹”并且永远不会显示子 UL 由于有相当多的代
c# - Unity3D:弹跳/反射光线转换
大家好，谢谢大家的帮助，我想做的事情相当简单，我想显示一个跟随我的弹跳/反射 Raycast 的线渲染器。这是我目前所拥有的。 private LineRenderer lr; public i
jquery - 几个问题(弹跳，对齐)
我试图对齐中间圆圈中的文本并让它们在圆圈悬停时弹跳(即文本) 这里是: http://jsfiddle.net/cJ3se/ 希望有人能帮忙丹佛最佳答案将元素中的单行文本垂直居中的最简单方法是将
css - 弹跳 webkit 动画
这很难解释，我来试一试。我目前有一个从右向左无休止地滑动的图像背景，就像传送带一样。图像用完时会重复。我试图让图像/动画在重复之前反弹(反向)。所以图像慢慢地向一个方向滑动，然后慢慢地向另一个方向
html - CSS 动画不工作(弹跳)
我想知道为什么我的弹跳动画在 JSFiddle 中不起作用但在我的开发网站上工作。请检查这个有什么问题。在我的开发站点中，箭头会弹跳但不会像我的 CSS 类中所说的那样旋转。 .active.ongo
python - 如何阻止皮蒙克关节的 body 弹跳？
我正在使用Pymunk模拟安装在细长腿顶部枢轴上的盒子的物理特性，该腿固定在地面上。连接盒子和腿的枢轴是 PivotJoint 和 SimpleMotor 的组合，模拟原始伺服系统，用户可以打开和关闭
ios - 弹跳 UIScrollView - 提示还有更多
我正在开发一个带有 ScrollView 的应用程序。不是很明显有更多内容，并且没有滚动指示器( ScrollView 被分页)。所以，为了给用户一个“嘿，这里有东西……”，我想让 ScrollVi
ios - 禁用屏幕顶部的 UIScrollView 弹跳
我的应用程序中有启用了垂直弹跳的 UIScrollView。我需要屏幕底部的弹跳，但没有在屏幕顶部启用。我不知道如何用以下方法检测 ScrollView : (void)scrollViewWi
jQuery UI - 弹跳 - 从左到右跳动的div
我的网站有问题，我在其中使用带有 jQuery UI 的 jQuery，在登录框上创建弹跳效果。但是，我对带有登录框的 div 有问题，因为它在屏幕左侧弹跳，当它应该在中间弹跳时，它在完成弹跳后
javascript - 在不禁用滚动功能的情况下防止 iOS 弹跳
当网页内容大于视口(viewport)时，我正在尝试实现一种解决方案，以防止 iOS 版 Safari 中的 iOS 反弹效果。我正在处理的页面在结构上非常具体，与此页面非常相似 http://ne
javascript - jQuery UI 弹跳(双图像)
第一次在这里发帖，如有任何标记问题请见谅。写帖子用SOF框架不习惯。我试图让一些社交图标在悬停时在我的网站上跳动。我从 jQuery UI 抓取代码进行测试并进行了一些小的编辑，但是我遇到了页面上可
iphone - 如果没有滚动距离，如何阻止 UIScrollView 弹跳？
我有一个 UIScrollView，我想在滚动时弹跳，但目前它能够弹跳，尽管内容大小与框架相同。如果内容大小和框架大小相同，如何阻止它弹跳？有没有比重写 setContentSize 和 setFra
javascript - jquery 在滚动时固定 div 弹跳
我的网页最右侧有一个 div (RightSide)，它位于另一个 div (TopBanner) 的正下方。即使用户向下滚动，TopBanner div 也会保持其在屏幕顶部的准确位置。正是我想要的
ios - UIButton 使 UIScrollView 弹跳
我有一个带分页的水平 UIScrollView。有两个按钮。一个向左滚动 scrollView，另一个向右滚动。左边的代码: - (IBAction)goLeftAction:(id)sender
ios - 如何创建具有不同页面大小的 UIScrollView(页面对齐、弹跳)
我正在尝试创建自定义垂直 UIScrollView，它可以处理具有不同页面高度的多个页面。假设: 页面高度等于或大于屏幕高度如果页面高于屏幕高度，它会像往常一样滚动 UIScrollView –

首页

博学

6Ren·AI

商城

jquery制作随机弹跳的小球特效

首页

博学

6Ren·AI

商城

jquery制作 随机弹跳的小球特效

jquery制作随机弹跳的小球特效