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

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

之前在三篇系列文章《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");
});
});
评分:
当前平均分 4.20 (82%) - 10 个投票
云左主机 广告
6 条 评论
  1. 自动滚动上下和评论这个

    4年前 回复
  2. 你右侧的三键功能好用,能分享吗?

    4年前 回复
    • 在这里:http://devework.com/wordpress-top-bottom-comment2.html

      4年前 回复
  3. 好像我这边没有显示任何东西呢……

    4年前 回复
  4. 报告一个比较奇怪的BUG,在代码框内鼠标左键键并且拖动选择代码片段有时候会使网页错位

    4年前 回复
    • 对,我也遇到过。当然,“网页错位”仅仅是被盖住左侧一部分。这个应该是那个代码高亮插件的问题。谢谢反馈!

      4年前 回复
发表评论