DedeCMS实现内容页和列表页键盘方向键翻页

天外飘仙

经常可以在其他网站上看到有这样一种特效，按下键盘的左右方向键就可以实现翻页，十分还用，余斗想要在自己公司的网站上实现这个功能，因为网站后台是织梦的，Dede并不自带这个特效，所以需要我们自己扩展。

方法很简单，秀站网就教大家怎么实现：

一、复制以下JS文件到我们的列表页和内容页模版中：

1. <script language="javascript" type="text/javascript">
   
2. $(document).ready(function(){
   
3. var prevpage=$("#pre").attr("href");
   
4. var nextpage=$("#next").attr("href"); $("body").keydown(function(event){
   
5. if(event.keyCode==37 && prevpage!=undefined) location=prevpage;
   
6. if(event.keyCode==39 && nextpage!=undefined) location=nextpage; });
   
7. });
   
8. </script>

复制代码

二、复制下样式和图片

1. /*上一篇 下一篇*/
   
2. .nexts{line-height:0;font-size:0;overflow:hidden;}
   
3. .prevs{line-height:0;font-size:0;overflow:hidden;}
   
4. .prevs a{background: url("../images/arrow.png") 0px -3px no-repeat;display: block;height: 95px;left: 50%;margin-top: -10%;position: fixed;text-indent: -999em;top: 50%;width: 60px;margin-left: -50%;}
   
5. .nexts a{background: url("../images/arrow.png") -70px -3px no-repeat;display: block;height: 95px;right: 50%;margin-top: -10%;position: fixed;text-indent: -999em;top: 50%;width: 60px;margin-right: -50%;}
   
6. .prevs a:hover{background: url("../images/arrow.png") 0px -103px no-repeat;display: block;}
   
7. .nexts a:hover{background: url("../images/arrow.png") -70px -103px no-repeat;display: block;}

复制代码

图片为：



二、 打开/include/arc.archives.class.php文件

找到：

1. $this->PreNext['pre'] = "上一篇：<a href='$mlink'>{$preRow['title']}</a> ";

复制代码

更改为

1. $this->PreNext['pre'] = "上一篇：<a id='pre' href='$mlink'>{$preRow['title']}</a> ";

复制代码

找到 ：

1. 
   
2. $this->PreNext['next'] = "下一篇：<a href='$mlink'>{$nextRow['title']}</a> ";

复制代码

更改为

1. $this->PreNext['next'] = "下一篇：<a id='next' href='$mlink'>{$nextRow['title']}</a> ";

复制代码

改完后保存，然后去刷新内容页，然后按下键盘的左右键，应该已经改好了。

三、接下来进行列表页，打开/include/arc.listview.class.php  

找到：

1. $prepage.="<a href='".$purl."PageNo=$prepagenum'>上一页</a>\r\n";

复制代码

更改为

1. $prepage.="<a id='pre' href='".$purl."PageNo=$prepagenum'>上一页</a>\r\n";

复制代码

找到 ：

1. $nextpage.="<a href='".$purl."PageNo=$nextpagenum'>下一页</a>\r\n";

复制代码

更改为

1. $nextpage.="<a id='next' href='".$purl."PageNo=$nextpagenum'>下一页</a>\r\n";

复制代码

至此全部修改完毕，刷新一下列表页试试吧。