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

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

实现思路

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

实现过程

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

返回顶部小火箭（仿电脑管家）相关推荐

Qt高仿电脑管家界面
目录 1 界面处理 2 左侧功能列表实现 3 QListWidget与QStackedWidget关联 4 窗口关闭最小化的重写
Bilibili返回顶部功能实现
Bilibili返回顶部功能实现文章目录 Bilibili返回顶部功能实现实现原理 1. 图 2. 实现代码最近学着开发网站,学校又是实训前端,也就多练练. 一开始是看水无月打牌注意到的,挺有趣 ...
html匀速回到顶部,原生js返回顶部（匀速、由快到慢）
在项目中我们经常有需求要求页面滚动到一定位置时出现返回顶部按钮,点击即返回顶部. 方法一: 锚点,这是最简单的.(a标签的href属性等于一直要到达位置元素的id值) 方法二: js直接给页面根节点设 ...
高仿QQ的手机管家的小火箭加速
高仿QQ的手机管家的小火箭加速 1.前言腾讯的手机管家,用过这个App的人都应该知道桌面的火箭一键加速这个功能,研究一下这个小火箭是怎么做出来的.先来了解一下小火箭有神马动作,首先在没有触碰它时,就 ...
返回顶部酷炫小火箭发射代码
很酷炫哦,直接粘贴即可 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
Android仿腾讯手机管家实现桌面悬浮窗小火箭发射的动画效果
功能分析: 1.小火箭游离在activity之外,不依附于任何activity,不管activity是否开启,不影响小火箭的代码逻辑,所以小火箭的代码逻辑是要写在服务中: 2.小火箭挂载在手机窗体 ...
电脑管家怎么关闭右键深度加速（小火箭）功能
电脑管家更新之后不知道怎么回事出现了一个右键深度加速功能,让我很是恼火,所以想了个办法,去掉这个. 1首先找到注册表,Windows加R键 2然后点击编辑-查找-QMRealTimeSpeedupSh ...
Android桌面悬浮窗进阶，QQ手机管家小火箭效果实现
这次我们将代码的重点放在火箭升空的效果上,因此简单起见,就直接在模仿360手机卫士悬浮窗的那份代码的基础上继续开发了,如果你还没有看过那篇文章的话,建议先去阅读 Android桌面悬浮窗效果实现,仿3 ...
jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...

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

实现思路

实现过程

完成

声明

返回顶部小火箭（仿电脑管家）相关推荐

最新文章

热门文章