html+css+jq翻页分页特效支持键盘左右键翻页

2025-09-29 15:07:27

1、新建html文档。

2、书写hmtl代码。

<a href="#" target="_blank">5</a>...

</div>

html+css+jq翻页分页特效支持键盘左右键翻页

3、书写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 }

html+css+jq翻页分页特效支持键盘左右键翻页

4、书写并添加js代码。

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

}

});

html+css+jq翻页分页特效支持键盘左右键翻页

5、代码整体结构。

html+css+jq翻页分页特效支持键盘左右键翻页

6、查看效果。

html+css+jq翻页分页特效支持键盘左右键翻页

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。