女神猫女王

代理加盟 2020全新代理計劃 賺錢+省錢雙管齊下,獨立平臺,豐厚利潤!

您現在的位置: 秀站網 > 織夢大學 > 使用教程 >

DedeCMS實現內容頁和列表頁鍵盤方向鍵翻頁

來源:本站原創 發布時間:2017-07-14 22:58:13熱度:我要評論(0

免費下載,無需注冊無需充值

經常可以在其他網站上看到有這樣一種特效,按下鍵盤的左右方向鍵就可以實現翻頁,十分還用,余斗想要在自己公司的網站上實現這個功能,因為網站后臺是織夢的,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";

至此全部修改完畢,刷新一下列表頁試試吧。

轉載請注明來源網址:http://www.qksux.club/dedecms_jq/810.html

    發表評論

    評論列表(條)

      女神猫女王 5413389121073427421767372042203029003381972172701623149497847787612655123056806095422563589053456620 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();