工业机器人网首页金币掉落特效分析及实现
- 作者: secrets_
- 来源: 51数据库
- 2021-08-26
年前,想在自己的网站首页搞点过年喜庆的气氛,在网上找素材无意中发现工业机器人网的首页有一个掉金币的JS特效,感觉挺好玩的,也是我想要找的效果,废话少说,我还是一步步跟大家分析和实现这个效果,原理比较简单。
大家可以看工业机器人网官网首页的效果:http://www.robot-shop.cn/
所需素材:
1、jquery框架。
2、金币小图片。
实现思路:
1、初始化时把小金币的图片用绝对定位-200px,可视范围上方,相当于隐藏。
2、然后利用位置移动动画,慢慢从上面网下面移动,最终移动到浏览器可视范围下方。
用到的函数:
1、jquery框架的animate。
2、javascript的setTimeout和setInterval
实现主要代码:
1、页面代码
2、js脚本
源码下载地址:http://www.51sjk.com/Upload/Articles/1/0/269/269535_20210708030344698.jpg 密码:fqg3
推荐阅读