工業機器人網首頁金币掉落特效分析及實作

年前，想在自己的網站首頁搞點過年喜慶的氣氛，在網上找素材無意中發現工業機器人網的首頁有一個掉金币的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

多寫原創文章，多分享，幫助他人，快樂自己。

歡迎程式設計界的朋友，一起學習，一起交流。

關注公衆号“程式員之事”擷取更多資源。