类极客公园火箭发射“返回顶部”jQuery效果（WordPress代码教程）

Jeff

发布于 2018-01-19 10:52:07

1.3K0

发布于 2018-01-19 10:52:07

文章被收录于专栏：DeveWork

之前在三篇系列文章《jQuery仿极客公园火箭发射“返回顶部”效果》中已经给出了“仿”的教程，今天分享也是一个火箭发射“返回顶部”的效果，不过这个火箭更加肥胖了点。本来Jeff也想将这个运用到主题中的，但看到加载的图片容量——虽然只有50多kb，但实在是忍受不了那么大的体积。须知图片过大，加载速度势必降低。不过总体而言，50多kb不算大，是Jeff太挑剔而已~~

在此之前，先来个Demo：演示地址

下文来源于一路走，特效代码来自“饭后茶余”。

教程如下：

先提前下载好所需要的上面的图片，点击下载。建议放在主题目录下的images文件夹中。

一

加载jQuery库文件，如果主题已经加载了，则可以忽略这一步；

二

在主题的footer.php 的适当位置添加以下代码：

<div style="display: none;" id="rocket-to-top"><div style="opacity: 0; display: block;" class="level-2"></div><div class="level-3"></div></div>

三

将下面的CSS代码加入主题的style.css 中：

#rocket-to-top div { left: 0; margin: 0; overflow: hidden; padding: 0; position: absolute; top: 0; width: 149px; } #rocket-to-top .level-2 { background: url("images/rocket_button_up.png") no-repeat scroll -149px 0 transparent; display: none; height: 250px; opacity: 0; z-index: 1; } #rocket-to-top .level-3 { background: none repeat scroll 0 0 transparent; cursor: pointer; display: block; height: 150px; z-index: 2; } #rocket-to-top { background: url("images/rocket_button_up.png") no-repeat scroll 0 0 transparent; cursor: default; display: block; height: 250px; margin: -125px 0 0; overflow: hidden; padding: 0; position: fixed; right: 0; top: 80%; width: 149px; z-index: 11; }

具体的需要根据主题不同修改相关CSS代码。

四

对于以下js代码，可以另外建立一个js文件，或者合并在已有的主题的相关js文件中（建议），还可以包裹在<script></script>放在footer.php中：

$(function() { var obj = $("#rocket-to-top"); var sTop=$(document).scrollTop(); var timer,scrolldelay; var button = true; $(window).scroll( function() { var sTop=$(document).scrollTop(); if(sTop==0) { if(obj.css("background-position")=="0px 0px") {obj.fadeOut('slow')} else { if(button) { button=false; $(".level-2").css("opacity",1); obj.delay(100).animate( {marginTop:"-1000px"}, "normal", function() { obj.css({"margin-top":"-125px","display":"none"}) button=true; } ) } } } else {obj.fadeIn("slow")} } ) obj.hover( function() { $(".level-2").stop(true).animate({opacity:1}); }, function() { $(".level-2").stop(true).animate({ opacity: 0 }); } ); $(".level-3").click(function() { if(!button) return; function changeBg() { var pos=obj.css("background-position"); if(obj.css("display")=="none" || button==false) { clearInterval(timer); obj.css("background-position","0px 0px"); return; } switch(pos) { case "0px 0px": obj.css("background-position","-298px 0px"); break; case "-298px 0px": obj.css("background-position","-447px 0px"); break; case "-447px 0px": obj.css("background-position","-596px 0px"); break; case "-596px 0px": obj.css("background-position","-745px 0px"); break; case "-745px 0px": obj.css("background-position","-298px 0px"); break; } } timer=setInterval(changeBg,50); $("html,body").animate({scrollTop:0},"slow"); }); });

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2013/03/19，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery