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

2013/03/19 WordPress, WP开发一路走 6 10,414

之前在三篇系列文章《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");
});
});