工业机器人网首页金币掉落特效分析及实现
年前,想在自己的网站首页搞点过年喜庆的气氛,在网上找素材无意中发现工业机器人网的首页有一个掉金币的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
相关推荐
quyunfei 2020-11-19
机器人智力研究 2020-11-18
聊天终结者机器人 2020-11-18
txq0 2020-11-20
zCSDN 2020-11-09
机器人智力研究 2020-11-05
ARMOTO机器人 2020-11-06
txq0 2020-11-06
遇见人工智能 2020-11-03
聊天终结者机器人 2020-11-02
clliuhust 2020-10-30
yatou0 2020-10-29
雨燕 2020-10-29
nodid 2020-10-29
yatou0 2020-10-29
zCSDN 2020-10-27
dhyddy 2020-10-27
聊天终结者机器人 2020-10-26