偶然得到一張圖片素材，想要實現返回頂部的小火箭效果。
素材：

實現思路

一張圖片上有多張圖片的不同運動狀態，可以用偏移來拼接動畫運動狀態，
圖片中含有動畫的好幾幀，想要讓小火箭的火苗動起來，可以分別設置幾種狀態，在設置不同的偏移即可完成。
難點就在如何連貫起來：可以采用一個計時器來完成，時間間隔需要設置的很短。

實現過程

<!-- html--> <div id="rocket-to-top"></div> /*css*/ #rocket-to-top{ background: url(../img/t_rocket_to_top.png) no-repeat transparent; cursor: default; display: none; height: 500px; overflow: hidden; padding: 0; position: fixed; width: 200px; z-index: 1; background-size: cover; background-position: 0 0; } //js var $mainRocket = $("#rocket-to-top"); var switch_background_flag=0; $mainRocket.hover(function(){ TerHander=setInterval(switch_background, 10); },function(){ clearInterval(TerHander); $mainRocket.css("background-position","0 0"); }); function switch_background() { switch_background_flag++; switch (switch_background_flag%3){case 0 : {$mainRocket.css("background-position","-150px 0");break;} case 1 : {$mainRocket.css("background-position","-300px 0");break;} case 2 :{$mainRocket.css("background-position","-450px 0");break;} } }

完成

demo 就是本頁的回到頂部按鈕的小火箭咯

聲明

實現效果是本人原創且并未用于商業用途，但圖片素材非本人所有，如有侵權請聯系我。

轉載于:https://www.cnblogs.com/Mxy-cnblog/p/9987697.html

總結

以上是生活随笔為你收集整理的返回顶部小火箭（仿电脑管家）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。