工业机器人网首页金币掉落特效分析及实现
程序员文章站
2022-06-22 13:06:18
年前,想在自己的网站首页搞点过年喜庆的气氛,在网上找素材无意中发现工业机器人网的首页有一个掉金币的JS特效,感觉挺好玩的,也是我想要找的效果,废话少说,我还是一步步跟大家分析和实现这个效果,原理比较简单。 大家可以看工业机器人网官网首页的效果:http://www.robot-shop.cn/ 所需 ......
年前,想在自己的网站首页搞点过年喜庆的气氛,在网上找素材无意中发现工业机器人网的首页有一个掉金币的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