搬码资源网广告位 搬码资源网广告位

为您的WordPress博客文章添加左右悬浮按钮

下面是搬码源码网 abnma.com 通过网络收集整理的代码片段。搬码源码网小编现在分享给大家,也给大家做个参考。

在网络上浏览文章的时候无意中看到这个小功能,左右两侧分别有两个固定悬浮的按钮,作用就是用来切换上一篇和下一篇文章,显得非常直观且利用用户体验,那么创客云来分享一下自己的代码吧。

一、上传图片素材

将下面两张图片保存到本地,然后再通过多媒体上传到您的媒体库中,并获取对应的 URL 地址。

二、添加 CSS 样式

将下面的 CSS 样式添加到主题目录下的 style.css 文件中,如果您使用了七牛云存储,请在七牛删除缓存,否则无法生效,或者您可以直接添加到主题目录的 header.PHP 文件中,代码放在之前。

<style type = “text/css”>

#art_left{

position:fixed;

top:50%;

left:10px;

margin-top:-32px;

}

#art_right{

position:fixed;

top:50%;

right:10px;

margin-top:-32px;

}

</style>

三、添加 js 函数

在合适的位置将下面的代码添加到主题目录的 single.PHP 页面进行调用,其中图片地址请替换为您自己的 URL,参照步骤一的方法。

<!–上下翻页–>

<div class=”prev” id = “prev” style = “display:none;”><?PHP prevIoUs_post_link(‘« %link’) ?></div>

<div class=”next” id = “next” style = “display:none;”><?PHP next_post_link(‘%link »’) ?></div>

<div id = “art_left”>

<a href = “javascript:;” onclick = “jump(‘p’);”>

<img src = “您的图片素材地址” />

</a>

</div>

<div id = “art_right”>

<a href = “javascript:;” onclick = “jump(‘n’);”><img src = “您的图片素材地址” /></a>

</div>

<script>

//声明全局变量

var prev;

var next;

//获取对应的URL

$(document).ready(function(){

prev = $(“#prev a”).attr(“href”);

next = $(“#next a”).attr(“href”);

});

//调用方法进行跳转

function jump(re) {

if(re == ‘p’) {

window.location.href = prev;

}

if(re == ‘n’) {

if(next == null) {

alert(‘没有了!’);

return false;

}

else{

window.location.href = next;

}

}

}

</script>

<!–上下翻页END–>

通过上面的三步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了,效果可以参考小 z 博客文章的左右两侧,添加上面的代码可能需要了解一些基本的 HTML,否则容易添加错误,如果您遇到什么问题也可以联系创客云帮忙解决。

以上是搬码源码网(abnma.com)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。如果觉得搬码源码网网站内容还不错,欢迎将搬码源码网网站推荐给程序员好友。

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11378.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?