现在很多文章左右两侧都会有两个固定悬浮的按钮，作用就是用来切换上一篇和下一篇文章，显得非常直观且利用用户体验，chrafz分享一下代码吧。
一、上传图片素材
将下面两张图片保存到本地，然后再通过多媒体上传到您的媒体库中，并获取对应的URL地址。
二、添加CSS样式
将下面的CSS样式添加到主题目录下的style.css文件中，如果您使用了七牛云存储，请在七牛删除缓存，否则无法生效，或者您可以直接添加到主题目录的header.php文件中，代码放在</head>之前。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<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，参照步骤一的方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!--上下翻页--> <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--> |
通过上面的几步您就可以通过左右固定悬浮按钮来切换上一篇、下一篇文章了，效果可以参考张弦先生文章的左右两侧。
支付宝扫一扫
微信扫一扫
