经常可以在其他网站上看到有这样一种特效，按下键盘的左右方向键就可以实现翻页，十分还用，余斗想要在自己公司的网站上实现这个功能，因为网站后台是织梦的，Dede并不自带这个特效，所以需要我们自己扩展。
方法很简单，秀站网就教大家怎么实现：
一、复制以下JS文件到我们的列表页和内容页模版中：
|
<script language="javascript" type="text/javascript"> $(document).ready(function(){ var prevpage=$("#pre").attr("href"); var nextpage=$("#next").attr("href"); $("body").keydown(function(event){ if(event.keyCode==37 && prevpage!=undefined) location=prevpage; if(event.keyCode==39 && nextpage!=undefined) location=nextpage; }); }); </script> |
二、复制下样式和图片
|
/*上一篇 下一篇*/
.nexts{line-height:0;font-size:0;overflow:hidden;}
.prevs{line-height:0;font-size:0;overflow:hidden;}
.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%;}
.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%;}
.prevs a:hover{background: url("../images/arrow.png") 0px -103px no-repeat;display: block;}
.nexts a:hover{background: url("../images/arrow.png") -70px -103px no-repeat;display: block;}
|
图片为：
二、 打开/include/arc.archives.class.php文件
找到：
| $this->PreNext['pre'] = "上一篇：<a href='$mlink'>{$preRow['title']}</a> "; |
更改为
| $this->PreNext['pre'] = "上一篇：<a id='pre' href='$mlink'>{$preRow['title']}</a> "; |
找到 ：
| $this->PreNext['next'] = "下一篇：<a href='$mlink'>{$nextRow['title']}</a> "; |
更改为
| $this->PreNext['next'] = "下一篇：<a id='next' href='$mlink'>{$nextRow['title']}</a> "; |
改完后保存，然后去刷新内容页，然后按下键盘的左右键，应该已经改好了。
三、接下来进行列表页，打开/include/arc.listview.class.php
找到：
| $prepage.="<a href='".$purl."PageNo=$prepagenum'>上一页</a>\r\n"; |
更改为
| $prepage.="<a id='pre' href='".$purl."PageNo=$prepagenum'>上一页</a>\r\n"; |
找到 ：
| $nextpage.="<a href='".$purl."PageNo=$nextpagenum'>下一页</a>\r\n"; |
更改为
| $nextpage.="<a id='next' href='".$purl."PageNo=$nextpagenum'>下一页</a>\r\n"; |
至此全部修改完毕，刷新一下列表页试试吧。
转载请注明来源网址：https://www.mubanyun.com/dedecms_jq/810.html
皖公网安备 34010402703520号
发表评论
评论列表（条）