UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

原生js 10个小球碰撞特效

所属分类：其他-动画效果,杂项

 49764  381  查看评论 (28)
分享到微信朋友圈
X
原生js 10个小球碰撞特效 ie兼容8
 查看演示  立即下载

小球碰撞特效。引用test.js文件。

我目前做的是10个小球同时出现，你也可以根据你的需要进行修改。

如果你想要小球随机出现的话，你只需要把58行的代码解注，然后57行的注释就行了。

这个写法还是很清晰的。 测试后的效果还是很不错的，各位也许会觉得代码挺长，

但是其思路还是蛮清晰的：

首先创建Screen类，并在Screen的构造函数中给出了球移动、碰撞所需的各种属性变量，如ballsnum、spring、bounce、gravity等等  然后用原型prototype给出相应的函数，如创建球，createBalls，球碰撞hitBalls，球移动moveBalls，给每个函数添加相应的功能、  

最后用按钮点击事件调用函数，仅此而已。只是我这里把点击的效果注释掉了，直接刷新页面就会随机改变，你下载了看就知道了

相关插件-动画效果,杂项
查看更多

bezie curve 曲线动画

 bezie curve 曲线动画
  动画效果
 33646  417

彩色火焰球弹跳动

 彩色火焰球弹跳动
  动画效果
 37365  441

html5 canvas粒子星空

 html5 canvas鼠标跟随粒子星空动画
  动画效果
 76898  742

超炫背景粒子效果

 超炫背景粒子效果
  动画效果
 51157  591

讨论这个项目（28）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    北方有佳人 0
    2019/5/9 11:19:42
    hilda520 0
    2018/5/18 10:20:17
    大神请赐教，问题：使用该插件，页面首次打开，速到有时很快，有时正常。页面不关闭，重新打开新页面，速度不定，请问怎么解决 回复
    ﹃没有小葡萄的可爱╭ 0
    2017/12/7 10:07:51

    我想让一开始加载小球碰撞的速度慢点，怎么修改

    回复
    kiming 0
    2017/11/20 14:55:04

    真的不错~~

    我需要这样的功能，可以开发不？

    1，小球换成图片，图片分两组A，B

    2，拖动B组的图片到A组，触碰到某一个，就交换链接

    3，拖动A组的图片到B组，A组减少拖动的那个，B组增加拖动的那个

    回复
    堂Di 0
    2017/11/20 14:09:10
    。 0
    2017/9/11 17:47:28

    div里不可以添加内容吗

        The Wind Rises0
        2017/11/16 14:31:34

        你说的添加内容是加什么？

    回复
    凡是繁的烦 0
    2017/7/15 10:58:17

    问一下，怎样让鼠标悬浮在一个小球上时使该小球静止？

    回复
    17岁秀才想当画家 0
    2017/6/30 21:37:15

    多少可以下载啊？

    回复
    风起了 0
    2017/6/19 16:38:11
    漫步走过从前 0
    2017/6/13 16:41:20
    很厉害  对于小白刚入门的我  还是有点看不懂 回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复