点击左右方向键实现翻页效果

快乐打工仔发布于 2年前分类：实例代码

本文分享一个简短的代码实例，它实现了点击左右方向键实现翻页效果。

代码实例如下:

下面是html代码如下:

<p>上一篇:<a id='pre' href='http://www.pipipi.net/a.html'>前端教程网欢迎您</a></p> 
<p>下一篇:<a id='next' href='http://www.pipipi.net/b.html'>前端教程网的url地址是pipipi.net</a></p>

jQuery代码如下:

$(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; 
  }); 
 });

代码注释:

（1）.$(document).ready(function(){})，当文档内容完全加赞完毕再去执行函数中的代码。

（2）.var prevpage=$("#pre").attr("href"),获取上一页的地址。

（3）.var nextpage=$("#next").attr("href"),获取下一页的地址。

（4）.$("body").keydown(function(event){ })，为body注册keydown事件处理函数。

（5）.if(event.keyCode==37 && prevpage!=undefined) location=prevpage，如果点击方向键左键，那么就返回上一页。

（6）.if(event.keyCode==39 && nextpage!=undefined) location=nextpage，如果点击方向键右键，那么就进入下一页。