天兴工作室:提供zblog模板 emlog模板 dedecms模板的下载和仿站定制 | RSS订阅 | 网站地图 | 联系我们
天兴工作室自用主题2015版上架销售
当前位置:网站首页 教程 正文
内容加载中......

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

我要提问 如果你对于此文还有任何疑问欢迎在文章下面的评论区域留言,如果你的疑问比较多,欢迎在本站的在线提问专业去发布问题,点击右侧的我要提问即可到达。天兴工作室将尽我所能为你解答问题。

本文标签左右箭头 快速翻页

本文地址http://www.txcstx.cn/post/808.html

版权说明:如非注明,本站文章均为 天兴工作室 原创,转载请注明出处和附带本文链接。

我猜你还喜欢这些...

哈哈,本文已有 2 位小伙伴发表了看法:

1#天兴工作室网友 (游客)  评论于 2015-12-28 18:31:10回应ta
能不能稍微详细一点,截图什么的。 这样新手实在是看不懂。。例如js代码放在哪里。
1#天兴工作室 (管理员)  评论于 2015-12-28 23:09:30回应ta
如果是这样,那么不建议动手修改...

欢迎 发表评论

必填

选填

选填

必填

◎欢迎在这里交流反馈,垃圾评论会秒删的额...

联系我们
最新评论
标签云
支付宝zblog企业模板phpzblogphp自适应模板资费表神州行长话卡没有网短信回执zblog回到顶部zblogphp网站标题zblogphp转换电信QQ客服zblog后台地址度娘亲情通GPRS套餐数据业务垃圾流量十一长假孝心机畅言表情插件A5html5主题卢松松博客模板phpzblogphp自适应新版合家欢地域如意通长话卡恬不知耻打满送拒绝IE浏览器励志卡升级ytcms下载短信红黑
热门模板