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

一个小小的人性化功能，给用户很大的方便，所以如果你要做类似的网站，侠客建议还是加上哟。
　　先体验一下此功能吧：
按下向左方向键转到:www.baidu.com
按下向右方向键转到:www.google.com
按下向回车键转到:www.jb51.net
按下ctrl+enter回车键转到:www.jb51.net
　　实现本功能的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
};

说明：按键盘← →方向键 或 PageUp PageDown键直接翻页

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

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

赞 (0)

相关推荐

  • 一个JS翻页效果

    <IFRAME border=0 align=center marginWidth=0 marginHeight=0 src="1.htm" frameBorder=no width=200 scrolling=no height=200 style="border: 1px solid #CCCCCC" id="pic"></IFRAME> <a href="javascript:Page(-1)&quo

  • 不错的Javascript表格翻页效果

    表格翻页 body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover { color: #006600; } 2) days = arguments[2]; if(arguments.length > 3) path = arguments[3]; with(new Date()){ setDate(getDate()+days); days=toUTCString();

  • Javascript表格翻页效果的具体实现

    表格翻页的实现方式有很多,下面以js为例为大家详细介绍下表格翻页效果的具体实现. 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页---www.jb51.net</TITLE> <style> body, td{ font-size: 9pt; } a:link {

  • Javascript表格翻页效果实现思路及代码

    复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>表格翻页</TITLE> <style> body, td{ font-size: 9pt; } a:link { color: #FF0000; } a:visited { color: #FF0000; } a:hover

  • JavaScript中transform实现数字翻页效果

    JavaScript中transform实现数字翻页效果

    效果图: 图(1)初始图 图(2)翻页过程 图(3)翻页结果 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transition</title> <style> #container{ width:500px; height:500px; margin:20px auto; ba

  • JS实现的3D拖拽翻页效果代码

    JS实现的3D拖拽翻页效果代码

    本文实例讲述了JS实现的3D拖拽翻页效果.分享给大家供大家参考,具体如下: 以前看到一个很火的帖子,拖拽实现的翻页效果,非常的有创意,自己也很喜欢,于是乎就萌发了用自己的方法模仿的想法.感谢原创作者的创意,结果一样,但过程不一样哦.奉上代码,供大家参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-3d-drag-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • js带前后翻页的图片切换效果代码分享

    js带前后翻页的图片切换效果代码分享

    本文实例讲述了javascript带前后翻页的图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于javascript带前后翻页的图片切换效果代码,实现过程很简单. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 在head区域引入CSS样式: <link href="css/css.css" rel="stylesheet" type=&qu

  • 超酷的鼠标拖拽翻页(分页)效果实现javascript代码

    拖动分页 body{ border:0px; margin:0px; overflow:hidden; background-color:transparent; font-family:宋体; } .page{ position:absolute; width:700px; border:1px solid #999; background-color:#000; left:425px; margin-left:-350px; cursor:default; z-index:0; } ul{

  • JavaScript 拖拽翻页效果代码

    拖拽翻页效果JavaScript特效-demo by http://www.jb51.net html,body{ width:100%; height:100%; border:0px; margin:0px; overflow:hidden; } #menu{ width:1000px; height:500px; overflow:hidden; background:lightblue; } .page{ position:absolute; width:300px; height:40

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

    一个小小的人性化功能,给用户很大的方便,所以如果你要做类似的网站,侠客建议还是加上哟. 先体验一下此功能吧: 按下向左方向键转到:www.baidu.com 按下向右方向键转到:www.google.com 按下向回车键转到:www.jb51.net 按下ctrl+enter回车键转到:www.jb51.net 实现本功能的javascript代码: 支持按键盘方向键翻页跳转的代码 document.onkeydown = pageEvent; var enableEnter = true; /

  • 按键盘方向键翻页跳转的javascript代码(支持ie,firefox)

    网上提供的代码,多是仅支持ie,下面这个是我们特别为大家整理的兼容firefox版本的. 支持按键盘方向键翻页跳转的代码支持ie,firefox document.onkeydown = pageEvent; var prevpage="http://www.jb51.net/softs"; var nextpage="http://www.jb51.net/codes"; function pageEvent(evt){ evt = evt ||window.ev

  • vue router自动判断左右翻页转场动画效果

    前段时间做了一个移动端spa项目,技术基于 :vue + vue-router + vuex + mint-ui 因为使用了vue-cli脚手架的webpack模版,所有页面都以.vue为后缀的文件作为一个组件 最近公司项目比较少终于有空来记录一下自己对vue-router的一些小小的使用心得, 一般的移动端口单页应用在跳转页面时候会有相应的转场动画,比如: 1. 从当前一级页面跳转二级页面需要展示的转场动画是一级页面向屏幕左边移动消失的同时, 二级页面从屏幕的右边向左边移动出现.(类似翻书翻到

  • PHP翻页跳转功能实现方法

    我们都知道用php+mysql在web 页实现数据库资料全部显示是非常简单而有趣的,数据库资料很少的情况下页面显示还是让人满意的,但是当数据库资料非常多的情况下,页面的显示情况将会变的非常糟糕,下面就来介绍一下如何实现当前页面数据资料显示数量及如何实现动态的翻转功能. 这里将介绍两种翻页显示功能的实现: 先介绍一下在翻页中用到的数据库语法: mysql_query("select * from table order by id desc"); 这条数据库语句再熟悉不过了,是用来搜索记

  • 微信小程序文章详情页跳转案例详解

    微信小程序文章详情页跳转案例详解

    前面写了一篇小程序访问公众号文章 里面所有的文章列表里面都是跳转了同一篇文章链接,那么,如果所有的列表跳转详情页的时候,跳转对应id所在的文章又该怎么写? index.html <view class="container"> <view wx:for="{{cardTeams}}" wx:key="{{index}}" wx:for-item="cardTeam" class="item"

  • JavaScript实现翻页功能(附效果图)

    JavaScript实现翻页功能(附效果图)

    效果图: 要点: displayPage('#pageDiv','goPage','query',10,1,100); #pageDiv是显示翻页的div名称. goPage是跳转到后面的文本输入框的id,如果有需要可以根据 * 这个参数直接赋值. query是查询的方法名称. 10是总页数 1是当前页数 100是总条数. <%@ page language="java" contentType="text/html;charset=UTF-8" pageEn

  • Js实现网页键盘控制翻页的方法

    本文实例讲述了Js实现网页键盘控制翻页的方法.分享给大家供大家参考.具体实现方法如下: 键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现. 举例如下: 复制代码 代码如下: <a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" hre

  • 原生js实现表格翻页和跳转

    本文实例为大家分享了js实现表格翻页和跳转的具体代码,供大家参考,具体内容如下 js代码里的row_num变量是显示数据的行数,修改后可改变每页显示的数量. html代码: <table border="" cellspacing="" cellpadding="" id="table"> <thead> <tr> <td>No</td> <td>Name

  • jquery实现键盘左右翻页特效

    jquery键盘左右翻页,jquery键盘方向键翻页功能,当无上一篇或者下一篇的时候,按键盘将会没什么反应,避免错误跳转. HTML代码 <p>上一篇:<a id='pre' href='http://www.daimajiayuan.com/sitejs-17294-1.html'>一款随滚动条下滑左右渐入的页面布局</a> </p> <p>下一篇:<a id='next' href='http://www.daimajiayuan.co

随机推荐