工业机器人网首页金币掉落特效分析及实现

年前,想在自己的网站首页搞点过年喜庆的气氛,在网上找素材无意中发现工业机器人网的首页有一个掉金币的JS特效,感觉挺好玩的,也是我想要找的效果,废话少说,我还是一步步跟大家分析和实现这个效果,原理比较简单。

大家可以看工业机器人网官网首页的效果:http://www.robot-shop.cn/

工业机器人网首页金币掉落特效分析及实现

所需素材:

1、jquery框架。

2、金币小图片。

实现思路:

1、初始化时把小金币的图片用绝对定位-200px,可视范围上方,相当于隐藏。

2、然后利用位置移动动画,慢慢从上面网下面移动,最终移动到浏览器可视范围下方。

用到的函数:

1、jquery框架的animate。

2、javascript的setTimeout和setInterval

实现主要代码:

1、页面代码

工业机器人网首页金币掉落特效分析及实现

2、js脚本

工业机器人网首页金币掉落特效分析及实现

源码下载地址:https://pan.baidu.com/s/1nwyiDK1 密码:fqg3

相关推荐