js键盘方向键文章翻页跳转的效果[小说站常用已支持firefox]_javascript技巧

发表评论

A+

所属分类：js教程

摘要

一些小说或图片类网站，为了方便大家阅读，往往会加入利用键盘方向键进行翻页、返回上一级、返回目录、回首页等功能。

一个小小的人性化功能，给用户很大的方便，所以如果你要做类似的网站，侠客建议还是加上哟。

　　先体验一下此功能吧：

按下向左方向键转到:www.baidu.com

按下向右方向键转到:www.google.com

按下向回车键转到:www.jb51.net

按下ctrl+enter回车键转到:www.jb51.net

　　实现本功能的javascript代码：

<!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>支持按键盘方向键翻页跳转的代码</title> 
</head> 
<body> 
<SCRIPT language=javascript> 
document.onkeydown = pageEvent; 
var enableEnter = true; //是否支持回车转向，一般情况如果页面需要发布评论什么的，这个开启了不好。 
var prevpage="http://www.baidu.com" //向左 这个一般是html生成的上一页的实际地址 
var nextpage="http://www.google.com" //向右 这个一般是html生成的下一页的实际地址 
var bookpage="http://www.jb51.net" //回车 一般用于返回首页或当前文章的第一页 
function pageEvent(evt){ 
evt = evt ||window.event; 
var key=evt.which||evt.keyCode; 
if (key == 13){ 
if (enableEnter){ 
location = bookpage 
return false; 
}; 
}; 
if (key == 37) location = prevpage 
if (key == 39) location = nextpage 
}; 
</SCRIPT> 
说明：按键盘← →方向键 或 PageUp PageDown键直接翻页 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上面的代码不是直接使用的，必须是你生成静态页的上一页，下一页的实际地址。

除非注明，否则均为@蒲公英网原创文章，转载必须以链接形式标明本文链接

本文链接：https://www.aipgy.com/333597.html