原生js 10个小球碰撞特效

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

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

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

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

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

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

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

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

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

相关插件-动画效果,杂项

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 36221  319

文字漂浮效果

点击按钮后,文字随机浮动,再次点击回到原位。
  动画效果
 49002  495

HTML5+CSS3音量调节旋转按钮

可以拨动让物体旋转,很不错
  动画效果
 41405  382

jQuery数据滚动

当页页滚动到一定位置时,数值自动增加动态效果
  动画效果
 46758  505

讨论这个项目(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
    很厉害  对于小白刚入门的我  还是有点看不懂 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复