织梦CMS实现按键盘方向键翻页效果

天外飘仙

织梦CMS教程之实现按键盘方向键上一页/下一页翻页效果，这样可以提高用户体验，特别是在小说站和图片站中用的比较多。

　　DEDECMS实现键盘翻页的制作方法：

　　找到include/arc.archives.class.php查找到以下代码：

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

复制代码

替换为以下代码：

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

复制代码

在内容页模板前添加以下JS：

1. <script type="text/javascript" language="javascript">
   
2. <!--
   
3. document.onkeydown=nextpage;
   
4. var prevpage='{dede:prenext get='pre'/}';
   
5. var nextpage='{dede:prenext get='next'/}';
   
6. var index_page = "index.html";
   
7. //var bookpage="index.html";
   
8. function nextpage(event)
   
9. {
   
10. event = event ? event : (window.event ? window.event : null);
    
11. //if (event.keyCode==13) location=bookpage
    
12. if (event.keyCode==13) location=index_page
    
13. if (event.keyCode==37)
    
14. {
    
15. if (prevpage!='' && prevpage!='上一篇：没有了 ')
    
16. location=prevpage;
    
17. else
    
18. alert('这是第一页');
    
19. }
    
20. if (event.keyCode==39)
    
21. {
    
22. if (nextpage!='' && nextpage!='下一篇：没有了 ')
    
23. location=nextpage;
    
24. else
    
25. alert('已经是最后一页了');
    
26. }
    
27. }
    
28. //-->
    
29. function getElement(aID)
    
30. {
    
31. return (document.getElementById) ? document.getElementById(aID): document.all[aID];
    
32. }
    
33. function makeRequest(url){
    
34. http_request=false;
    
35. if(window.XMLHttpRequest){//Mozilla,Safari,...
    
36. http_request=new XMLHttpRequest();
    
37. if(http_request.overrideMimeType){
    
38. http_request.overrideMimeType('text/xml');
    
39. }
    
40. }else if(window.ActiveXObject){//IE
    
41. try{
    
42. http_request=new ActiveXObject("Msxml2.XMLHTTP");
    
43. }catch(e){
    
44. try{
    
45. http_request=new ActiveXObject("Microsoft.XMLHTTP");
    
46. }catch(e){}
    
47. }
    
48. }
    
49. if(!http_request){
    
50. alert('Giving up:(Cannot create an XMLHTTP instance)');
    
51. return false;
    
52. }
    
53. return http_request;
    
54. }
    
55. </script>

复制代码

　　可以当单独将此JS放到JS文件中调用，防止页面臃肿保持html源码的简介，用按键实现翻页效果就可以了，赶紧测试下吧