返回顶部小火箭（仿电脑管家）

最新推荐文章于 2023-06-07 17:08:00 发布

weixin_30387663

最新推荐文章于 2023-06-07 17:08:00 发布

阅读量313

点赞数

原文链接：http://www.cnblogs.com/Mxy-cnblog/p/9987697.html

版权

偶然得到一张图片素材，想要实现返回顶部的小火箭效果。
素材：

实现思路

一张图片上有多张图片的不同运动状态，可以用偏移来拼接动画运动状态，
图片中含有动画的好几帧，想要让小火箭的火苗动起来，可以分别设置几种状态，在设置不同的偏移即可完成。
难点就在如何连贯起来：可以采用一个计时器来完成，时间间隔需要设置的很短。

实现过程

<!-- 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;
    }     
    }
}