专栏首页DeveWorkjQuery仿极客公园火箭发射“返回顶部”效果(初始篇)

jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)

某年某月,Jeff在极客公园游览时,看见了其右下角的“返回顶部”效果。点一下,小火箭呼啦就上去了。我是那个喜欢啊,马上右键“审查元素”,希望能将源代码扒出来运用在自己的主题中。找到相关代码后在本地测试,fail了。然后发现,其js代码是加密的,Jeff不懂js啊,胡乱想可以js解密,但解密后还是不行。于是,我又借助强大的搜索引擎Google,找到了一系列资料。现在将分多篇文章转载这些精华,版权归原作者所有啊~

先给出个演示Demo:演示地址

以下来自andyliu,全文转载:

最近在网络中游荡的时候发现极客公园的回到顶部的  小火箭效果很棒 so~~~模仿一下

首先我们先把极客公园的回到顶部需要的图片下载到本地

嗯,就是这张图片了,看到这张图片。我想到,火箭升空的效果可以有两种方法实现,其中一种使用了css3 的keyframe关键帧技术 ,还有一种就是用js来控制background-position。

在这里我是用第二种js控制background-position来实现。至于第一种不知道的童鞋自己去搜搜吧。

首先我们先写好html代码,没什么好说的直接上代码了:

<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style> .one {width:100%;height:3000px;} #top {background:url(./rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;} </style> </head> <body> <div class="one"></div> <div id="top" style="display:none;"></div> </body> </html>

第二部,我们想想这个效果一个可以分为几个小的效果。 1.鼠标移动滚动到页面中下部时的显示效果 2.鼠标移动到移动到div上的变色效果(这里其实不是变色二十移动了background-position) 3.火箭喷射气体的动画 4.火箭升空的效果 5.页面滚动到顶部的效果 我们一个一个来写。 第一个:

$(window).scroll(function(){ if ($(window).scrollTop()>500){ <span style="white-space:pre"> </span> $("#top").fadeIn(500); } });

第二个:

$('#top').mouseenter(function() { $(this).css('background-position', '-149px 0px'); }); $('#top').mouseleave(function() { $(this).css('background-position', '0px 0px'); });

第三个:这里使用setInterval来达到定时改变background-position 的效果

var topPosiiton = -149; var flyTemp = setInterval(function() { topPosiiton += -149; if(topPosiiton < -743) { topPosiiton = -149; } $("#top").css('background-position', topPosiiton + 'px 0px'); }, 50);

第四个:

$('#top').animate({top: '-500px'} ,'normal', 'linear');

第五个:

$('html,body').animate({scrollTop: '0px'}, 800);

将以上五个效果组合起来,做一些小的调试就完成了极客公园回到顶部效果的初期模型:

<!DOCTYPE HTML> <html> <head> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <style> .one {width:100%;height:3000px;} #top {background:url(./rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;} </style> </head> <body> <div class="one"></div> <div id="top" style="display:none;"></div> </body> <script> $('#top').click(function(){   $('html,body').animate({scrollTop: '0px'}, 800); var fly = setTimeout(function(){ $('#top').animate({top: '-500px'} ,'normal', 'linear'); var fly2 = setTimeout(function() { $("#top").hide(); $("#top").css("top", 'auto'); $("#top").css("background-position", '0px 0px'); clearTimeout(fly2); },1200); clearTimeout(fly); clearInterval(flyTemp); }, 1000); var topPosiiton = -149; var flyTemp = setInterval(function() { topPosiiton += -149; if(topPosiiton < -743) { topPosiiton = -149; } $("#top").css('background-position', topPosiiton + 'px 0px'); }, 50);   }); $('#top').mouseenter(function() { $(this).css('background-position', '-149px 0px'); }); $('#top').mouseleave(function() { $(this).css('background-position', '0px 0px'); });     $(window).scroll(function(){ if ($(window).scrollTop()>500){ $("#top").fadeIn(500); }else{ //$("#top").fadeOut(1500); } }); </script> </html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • CSS 基础

    层叠样式表 (Cascading Style Sheets),一种用来为结构化文档(如 HTML 文档或 XML 应用)添加样式(字体、间距和颜色等)的计算机语...

    Nian糕
  • 云计算是数据分析的最佳场所吗?

    数据分析正在成为企业数据生态系统的关键要素。它是物联网(IoT)的主要推动力之一,无疑将为数字经济的发展提供关键的竞争优势。 但其成本并不低,而且并不容易掌握...

    静一
  • 括弧匹配检验

    #include<iostream> #include<cstring> #include<cstdio> using namespace std; char...

    attack
  • 国内35岁以上的码农都干啥去了?

    这个问题要是在前几年说,还真成立。不过要是拿到现在来说,35岁以上的也渐渐多了起来。 1.有 从现在开始算,35岁,也就是80年生人,05年开始工作,那时的国内...

    程序员互动联盟
  • 开源流媒体服务器SRS学习笔记(3) - HTTPCallback实现安全认证

    按上回继续,安全论证是绝大多数应用的基本要求,如果任何人都能无限制的发布/播放视频,显然不适合。SRS中可以通过HTTPCallback机制来实现,参考下面的配...

    菩提树下的杨过
  • Python | 论做游戏外挂,Python输过谁?

    来源:http://blog.csdn.net/qq_37267015/article/details/71330600

    用户1634449
  • 《数据结构》 栈代码操作集合

    栈的基本操作代码,来自《数据结构-用C语言描述》(第二版)高教社 栈的数据结构相当于受限制(只能从栈顶取元素,先进后出LIFO)的顺序表或单链表,可以...

    Steve Wang

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动