专栏首页DeveWorkWordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)

WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式二)

之前发表过一种样式的“返回顶部、返回底部、评论”效果,今天在这里分享Devework.com目前使用的效果:一个博客侧边滑动,返回顶部,查看评论的小工具,作为WordPress等博客专用。说到这个小工具,可是小有来头啊,据说(强调是“据说”)这原来是一位WordPress高手林木木首创的(人家称之为“滑动导航”),然后被某人改进做成了WordPress 插件,并且成功提交到WordPress官方去了。所以说不是自己的一定要说明来源,不然...;最后说一句,这个挺像插件wp-auto-top,姑且当做是wp-auto-top插件代码化吧~

以下的代码如果没有错的应该来源于林木木,图片来源于wp-auto-top插件,感谢原作者。为防止JS冲突,本人稍作了修改。

教程如下:

一、确保你的主题已经加载jQ库,然后将以下js代码以gototop.js文件保存,放在主题的目录下:

jQuery(document).ready(function($) { $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body"); $("#shang").mouseover(function() { up() }).mouseout(function() { clearTimeout(fq) }).click(function() { $body.animate({ scrollTop: 0 }, 400) }); $("#xia").mouseover(function() { dn() }).mouseout(function() { clearTimeout(fq) }).click(function() { $body.animate({ scrollTop: $(document).height() }, 400) }); $("#comt").click(function() { $body.animate({ scrollTop: $("#comments").offset().top }, 400) }); }); function up() { $wd = $(window); $wd.scrollTop($wd.scrollTop() - 1); fq = setTimeout("up()", 50) }; function dn() { $wd = $(window); $wd.scrollTop($wd.scrollTop() + 1); fq = setTimeout("dn()", 50) };

二、打开主题的footer.php,在.....前加入以下代码:

<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/gototop.js"></script> <div id="shangxia"> <div id="shang" title="↑ 返回顶部"></div> <?php if ( is_singular() ){ ?> <div id="comt" title="查看评论"></div> <?php } ?> <div id="xia" title="↓ 移至底部"></div> </div>

/js/gototop.js需要改为与你的实际路径。

三、将以下css代码丢入主题的style.css中:

#shangxia{position:fixed;top:45%;right:50%;display:block;margin-right:-540px;z-index:999;} #shang,#comt,#xia{background:url(gototop.png) no-repeat;position:relative;cursor:pointer; height:25px;width:29px;margin:10px 0 0;} #comt{background-position:left -30px;height:32px;} #xia{background-position:left -68px;} #comt:hover{background-position:right -30px;} #shang:hover{background-position:right 0;} #xia:hover{background-position:right -68px ;}

上面的css相关代码有些需要修改的,如果没有css基础那就帮不了你了。图片gototop.png有以下参考(下载地址在这里):

找一张你喜欢的重名为gototop,放到主题目录下的images文件夹(应该都有这个文件夹吧?)即可。

如果发现查看评论的按钮失效,原因可能是你的主题的评论的div的ID不是“comments”,需要修改js代码。

如果不能实现像本站Devework.com的滑动效果的话应该是js冲突了,自己折腾吧~

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress 添加个性化的博客宠物(妹纸篇)

    某日闲逛看到的某个博客上的一个博客宠物,准确来说不是宠物,人家可是萌妹纸啊!看看右侧这个图,就是这个萌妹纸了(后来用谷歌相似图片搜索才发现是死亡笔记的)。让我感...

    Jeff
  • WordPress 添加个性化的博客宠物(汉纸篇)

    之前一篇文章分享了在WordPress 添加个性化的萌妹子的方法(见:《WordPress 添加个性化的博客宠物(妹纸篇)》),不过那个不适合广大的男汉纸的博客...

    Jeff
  • WordPress免插件仅代码实现“返回顶部、返回底部、评论”效果(样式一)

    本文所说的”返回顶部、返回底部、评论 “相信你知道是什么东东了吧?  一般你在各大网站的右下角都能看到类似的东东,但许多网站都普遍只有“返回顶部”的效果。不过就...

    Jeff
  • JS打砖块,童年的回忆

    我不是费圆
  • css 背景图片虚化效果

    转载地址:http://blog.csdn.net/ohehehou/article/details/51975539

    lin_zone
  • CSS常见兼容性问题总结

    浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况。

    书童小二
  • js设计模式之惰性单例模式

    <html> <body> <button id="loginBtn">登录</button> </body> <script> var cr...

    吴裕超
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 简单实用的纯CSS百分比圆形进度条代码解析/源码下载

    percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮...

    用户5997198

扫码关注云+社区

领取腾讯云代金券