类极客公园火箭发射“返回顶部”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"); }); });

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jaycekon

Phantomjs+Nodejs+Mysql数据抓取(1.数据抓取)

概要: 这篇博文主要讲一下如何使用Phantomjs进行数据抓取,这里面抓的网站是太平洋电脑网估价的内容。主要是对电脑笔记本以及他们的属性进行抓取,然后在使...

4315
来自专栏青玉伏案

iOS开发针对对Masonry下的FPS优化讨论

今天博客的内容就系统的讨论一下Masonry对FSP的影响,以及如何更好的使用Masonry。如果你对iOS开发足够熟悉的话,那么对Masonry框架应该不陌生...

2566
来自专栏葡萄城控件技术团队

ActiveReports 报表应用教程 (5)---解密电子商务领域首张电子发票的诞生(套打报表)

6月27日京东商城发布了中国电子商务领域首张电子发票,同时宣布相关系统正式上线,这标志着中国电子商务的步伐又向前迈出了重要的一步。目前“电子发票”覆盖的服务范围...

27010
来自专栏我的小碗汤

极致简洁的markdown编辑神器

Markdown 其实向来是文字爱好者和码农们的小众需求,市面上也涌现出了形形色色的 Markdown 编辑器,Mou、Typed、Ulysess、Macdow...

2475
来自专栏陈满iOS

[iOS学习笔记]·第三方网络图片处理框架:SDWebImage(官方文档翻译篇)

该库提供了具有缓存支持的异步图像下载器。为方便起见,我们为UI元素例如UIImageView,UIButton,MKAnnotationView等类添加了cat...

3352
来自专栏CRPER折腾记

React 折腾记 - (4) 侧边栏联动Tabs菜单-增强版(结合Mobx)

上个版本 :React 折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏

4242
来自专栏糊一笑

移动端效果之ScrollList

写在前面 列表一直是展示数据的一个重要方式,在手机端的列表展示又和PC端展示不同,毕竟手机端主要靠滑。之前手机端之前一直使用的IScroll,但是IScroll...

2756
来自专栏Winter漫聊技术

NowView 1.0+ READMENow

一款Android图文精选app,通过抓取网页获得图文列表。目前包含站酷(Zcool)精选、国家地理(National Geographic)每日一图、知乎日报...

1302
来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

6990
来自专栏mukekeheart的iOS之旅

iOS学习——tableview中带编辑功能的cell键盘弹出遮挡和收起问题解决

  最近在项目中经常用到UITableView中的cell中带有UITextField或UITextView的情况,然后在这种场景下,当我们点击屏幕较下方的ce...

6948

扫码关注云+社区

领取腾讯云代金券