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

快乐打工仔 分类:实例代码

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

代码实例如下:

下面是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,如果点击方向键右键,那么就进入下一页。

相关阅读:

(1).attr()方法可以参阅jQuery attr()一章节。

(2).keydown可以参阅jQuery keydown 事件一章节。

(3).keyCode可以参阅javascript keyCode属性一章节。

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

回复

我来回复
  • 暂无回复内容