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

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

前面分享了两篇有关《 jQuery 仿极客公园火箭发射“返回顶部”效果》的文章,如果你是Word-Press 老手,肯定知道如何移植到WordPress主题中;本文针对的是新手,如果你想在你的WordPress主题中实现这个效果,那就往下看吧!

建议先看一下下面的文章——如果你还没有看过的话: 《 jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》 《 jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)

教程如下(代码来源于andyliu,感谢原作者。):

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

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

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

<div class="one"></div> <div id="backtotop" style="display:none;"></div>

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

.one {width:100%;height:3000px;} #backtotop {background:url(images/rocket_up.png) 0px 0px no-repeat;position:fixed;bottom:0px;right:10px;width:149px;height:260px;cursor: pointer;}

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

var scrollTT = { tTSpeed : 800, // 滚动到顶部的时间 startFlyTime : 1000, // 火箭起飞的时间 restartTime : 1200, // 重置火箭位置的时间 flySpeed : 50, // 火箭向上飞行的速度 obj : $("#backtotop"), // 回到顶部的dom flyTemp : '', // 一个setInterval的临时变量 /** * * 初始化 scrollTT 函数 * 主要是像对象添加事件 * */ init : function( obj, tTSpeed, startFlyTime, restartTime, flySpeed ) { scrollTT.tTSpeed = scrollTT.tTSpeed || tTSpeed; scrollTT.startFlyTIme = scrollTT.startFlyTIme || startFlyTime; scrollTT.restartTime = scrollTT.restartTime || restartTime; scrollTT.flySpeed = scrollTT.flySpeed || flySpeed; scrollTT.obj = scrollTT.obj || obj;   // 向window 绑定scroll 事件 scrollTT.onScroll();     scrollTT.obj.click(function(){ // 关闭默认的scroll事件 $(window).off("scroll"); // 页面向上滚动 $('html,body').animate({scrollTop: '0px'}, this.tTSpeed); // 火箭向上飞行 scrollTT.objFly(); // 火箭的喷气效果 scrollTT.blow();   });   // 鼠标在火箭上的效果 scrollTT.obj.mouseenter(function() { $(this).css('background-position', '-149px 0px'); }); // 鼠标移开的效果 scrollTT.obj.mouseleave(function() { $(this).css('background-position', '0px 0px'); });   }, /* * 向window 绑定scroll 事件 * */ onScroll : function() { $(window).on('scroll', function() { if ($(window).scrollTop()>500){ scrollTT.obj.fadeIn(500); }else{ scrollTT.obj.fadeOut(1500); } }); }, /** * dom对象向上飞行 * */ objFly : function() { var fly = setTimeout(function(){ scrollTT.obj.animate({top: '-500px'} ,'normal', 'swing'); scrollTT.resetFly(); clearTimeout(fly); clearInterval(scrollTT.flyTemp); }, scrollTT.startFlyTime); }, /** * dom 对象飞行完毕回到原来的位置 * */ resetFly : function() { var fly2 = setTimeout(function() { scrollTT.obj.hide(); scrollTT.obj.css("top", 'auto'); scrollTT.obj.css("background-position", '0px 0px'); scrollTT.onScroll(); clearTimeout(fly2); },scrollTT.restartTime); }, /** * dom 对象的喷气效果 * */ blow : function() { var topPosiiton = -149; scrollTT.flyTemp = setInterval(function() { topPosiiton += -149; if(topPosiiton < -743) { topPosiiton = -149 } scrollTT.obj.css('background-position', topPosiiton + 'px 0px'); }, this.flySpeed); } };   scrollTT.init();

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

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》,本文将对前一篇的代码进行优化。还是转载自andyliu: 先给出个演示Demo:演示地址...

    Jeff
  • 多说 提速:js内页页脚加载、静态文件CDN

    最近为 Jeff的阳台 折腾着插件的提速工作。Jeff的阳台使用了多说评论系统,但多说的加载速度实在是不敢恭维(稳定性也一样),于是又邪恶地想到为多说提速一番,...

    Jeff
  • 一些移动 Web 前端开发上的要点记录

    从五月份实习到现在快三个月了,这三个月的实习时段,按照leader 的要求,每天要写日总结发RTX 内部群,每周都要写周邮件群发整个部门——就这么坚持了三个月。...

    Jeff
  • jQuery仿极客公园火箭发射“返回顶部”效果(优化篇)

    承接上一篇《jQuery仿极客公园火箭发射“返回顶部”效果(初始篇)》,本文将对前一篇的代码进行优化。还是转载自andyliu: 先给出个演示Demo:演示地址...

    Jeff
  • Github使用教程

    你的本地Repository由 git 维护的三棵“树”组成。第一个是你的工作目录(Working dir),就是本地磁盘,例如:E:\first;第二个是缓存...

    用户3148308
  • 领域驱动小节

    在应用层(Application)注入 Repository 服务,在 Repository 中转化 Domain 对象,这种方式简单直接,但是很容易将 Rep...

    乐事
  • Ubuntu环境使用apt命令下载管理包的优势

    之前在Ubuntu下我一直坚持将软件下载包下载到指定文件夹下进行解压安装的习惯,在部门同事的建议下,我开始使用apt命令下载管理包。

    Zoctopus
  • 比邻弘科联合创始人COO史建刚:首席数据官CDO,你这颗时代焦虑下的蛋

    未来,数据就像电力网络(Power Grid)一样,将构成信息文明时代的运作框架、基础设施,所有的企业都将迁移到另外一片由数据构建的新文明大陆上去,而CDO就是...

    小莹莹
  • 在 Android 上进行高刷新率渲染

    长久以来,手机屏幕刷新率都是 60Hz。应用和游戏开发者也习惯了假定刷新率为 60Hz,也就是每 16.6ms 生成一帧,而且这样开发出来的应用和游戏都会正常进...

    Android 开发者
  • python可视化文本分析-分析Q群聊天记录(一)

    代码开箱可用,你需要把你的文件名替换正确的路径,还有要在同级目录下创建img文件夹保存生成的两张图片。各种依赖环境很简单,直接pip install xxx。 ...

    bigsai

扫码关注云+社区

领取腾讯云代金券