天兴工作室

主题演示站

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

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

zblog现在分为zblogasp和zblogphp两个版本,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就是大功告成了,上个演示截图:

QQ截图20150724232805.png

<< 1 >>
«    2025年6月    »
1
2345678
9101112131415
16171819202122
23242526272829
30
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
搜索
最新留言
文章归档
网站收藏
友情链接

Powered By Z-BlogPHP 1.7.4

天兴工作室主题演示站点,如遇到问题请联系我们的在线qq:207649916咨询