注册 登录 天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制

教程

分享一些有关于zblog的教程,这里有zblog初级教程、zblog中级教程和zblog进阶版教程,如果对你有所帮助,深感荣幸

当前位置:网站首页 教程 正文

zblog用键盘上的左右箭头(←和→)实现快速翻页

天兴工作室管理 2015-07-24 教程 1121 ℃ 2 评论

zblog用键盘上的左右箭头(←和→)实现快速翻页这个功能是用js实现的,加上这个好听点说就是优化了用户体验。实现起来也非常简单,有动手能力的朋友可以尝试下。

zblog现在分为zblogaspzblogphp两个版本,js代码都是一样的,html代码略有不同。


zblogphp版,将以下代码和最下面的js代码添加到post-single.php合适的位置:

<p>{if $article.Prev}
<a  href="{$article.Prev.Url}" title="{$article.Prev.Title}" class="up" id="up" >上一篇</a>
{/if}</p>
<p>{if $article.Next}
<a  href="{$article.Next.Url}" title="{$article.Next.Title}" class="next" id="next">下一篇</a>
{/if}</p>
<p>试试用"←"或"→"方向键快速翻页把 \(^o^)/</p>


zblogasp版,在模板文件夹里面新建两个文件,分别是“b_article_navbar_l.html”和“b_article_navbar_r.html“,如果模板内已有这两个文件的仅需需求代码和下面的代码保持一致即可。

b_article_navbar_r.html:

<p>下一篇:<a  href="<#article/nav_r/url#>" title="<#article/nav_r/name#>" class="up" id="up"><#article/nav_r/name#></a></p>

b_article_navbar_l.html:

<p>下一篇:<a  href="<#article/nav_l/url#>" title="<#article/nav_l/name#>" class="up" id="up"><#article/nav_l/name#></a></p>

然后在b_article-single.html合适的位置添加以下代码和js代码即可。

<#template:article_navbar_l#> <#template:article_navbar_r#>


最后上js代码,zblogasp版和zblogphp版的js代码都是一样的。

<script language="javascript">
last=document . getElementById("up").href;
next=document.getElementById("next").href;
function keyUp(e) {
    if(navigator.appName == "Microsoft Internet Explorer"){
        var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode);
    }else{
        var keycode = e.which;var realkey = String.fromCharCode(e.which);
    }
    if(keycode==39){window.location.href=next;}
    if(keycode==37){window.location.href=last;}
}
document.onkeyup = keyUp;
</script>

最后的最后,按照自己的需求美化下css就是大功告成了,上个演示截图:

zblog用键盘上的左右箭头(←和→)实现快速翻页 教程

赞 (1)

已有 2 位小伙伴发表了看法

天兴工作室网友

回应ta天兴工作室网友 (游客)

评论于 2015-12-28 18:31:10

能不能稍微详细一点,截图什么的。 这样新手实在是看不懂。。例如js代码放在哪里。
天兴工作室管理

回应ta天兴工作室管理 (管理员)

评论于 2015-12-28 23:09:30

如果是这样,那么不建议动手修改...

欢迎 发表评论

服务项目

快速入口

常见问题

天兴工作室 | www.txcstx.cn

天兴工作室介绍天兴工作室承接:网站建设、zblog模板和dedecms模板定制、仿站(像素级仿站)、html单页面定制和修改、网站模板修改等服务;我们的办事准则:要么不答应、答应则一定做到

  • 交流群:ZBLOG交流群
  • 客户群:天兴工作室客户群
在线QQ 评论文章