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

快過年了,想在自己的網站首頁搞點過年喜慶的氣氛,在網上找素材無意中發現工業機器人網的首頁有一個掉金幣的JS特效,感覺挺好玩的,也是我想要找的效果,廢話少說,我還是一步步跟大家分析和實現這個效果,原理比價簡單。

大家可以工業機器人網官網首頁的效果:http://www.robot-shop.cn/



所需素材:

1、jqurey框架。

2、金幣小圖片。

實現思路:

1、初始化時把小金幣的圖片用絕對定位-200px,可視範圍上方,相當於隱藏。

2、然後利用位置移動動畫,慢慢從上面網下面移動,最終移動到瀏覽器可視範圍下方。

用到的函數:

1、jquery框架的animate。

2、javascript的setTimeout和setInterval

實現主要代碼:

1、頁面代碼

2、js腳本

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章