jquery键盘左右键分页效果代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery键盘左右键分页效果代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery键盘左右键分页效果</title>
<link rel="stylesheet" href="css/zzsc.css" type="text/css">
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="pagnation" id="pagnation">
	<a href="#"  class="page-prev">上一页</a>
	<a href="#"  class="current">1</a>
	<a href="#" >2</a>
	<a href="#" >3</a>
	<a href="#" >4</a>
	<a href="#" >5</a>...
	<a href="#" >13</a>
	<a href="#"  class="page-next">下一页</a>
</div>
<div class="pagnation-tips">提示：支持键盘“← →”键翻页</div>
<script>
	var pagnation=$("#pagnation");
	$(document).on("keydown",function(event){
		switch(event.keyCode){
			 case 37 : window.location.href = pagnation.find(".page-prev").attr("href");break;
			 case 39 : window.location.href = pagnation.find(".page-next").attr("href");break
		}
	});
</script>
<!-- 代码 结束 -->
</body>
</html>

CSS代码(zzsc.css):

a:link,a:visited{color:#444;text-decoration:none;-webkit-transition:color .4s ease-in-out;-moz-transition:color .4s ease-in-out;-ms-transition:color .4s ease-in-out;-o-transition:color .4s ease-in-out;transition:color .4s ease-in-out;}
a:hover{color:#c36;text-decoration:underline;}
.pagnation{text-align:center;margin-top:32px;}
.pagnation a{display:inline-block;width:34px;height:34px;line-height:34px;overflow:hidden;background:url(../images/sprite.png) no-repeat 0 -29px;margin-left:4px;font-size:16px;vertical-align:top;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;}
.pagnation a:hover{background-position:0 -64px;color:#fff;text-decoration:none}
.pagnation .page-prev,.pagnation .page-next{line-height:555px;}
.pagnation .page-prev{background-position:-35px -29px;}
.pagnation .page-prev:hover{background-position:-35px -64px;}
.pagnation .page-next{background-position:-70px -29px;}
.pagnation .page-next:hover{background-position:-70px -64px;}
.pagnation .current{background-position:0px -64px;color:#fff}
.pagnation-tips{margin-top:10px;color:#999;text-align:center}

附件:下载该文件资源,减少时间成本(增值服务)