Js实现网页键盘控制翻页的方法
2014-10-30 00:00
1011 查看
本文实例讲述了Js实现网页键盘控制翻页的方法。分享给大家供大家参考。具体实现方法如下:
键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现。
举例如下:
js代码如下:
今天从网上看到这个功能,不错啊,以后就可以在文章中,增加这个功能了
如果搜下到"上一页",则定义
如果搜下到"下一页",则定义
下面说一下我做过的一个上下翻页的快捷键实现。当用户点击左右方向键时,js获取键盘代码,然后跳转到下一页或者上一页,现在网上很多代码都是ie的,firefox下无法执行,很多时候都是因为ff下不支持非标准的**.click()造成的,ie下对A标签进行click操作默认转到了相应的网址,而ff下不可行(onClick()倒是可以,不过这是执行的A的onClick事件)。
解决办法也很简单,我们可以采用这个方法:捕获用户点击右方向键时,把下一页的A的href属性赋给window.location.href就可以了。
希望本文所述对大家基于javascript的web程序设计有所帮助。
键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用js监测用户是否有按上下键即可实现。
举例如下:
<a id="last" href="<?=$lefturl?>">上一章</a> <a id="booklist" href="<?=$booklisturl?>">返回目录</a> <a id="next" href="<?=$righturl?>">下一章</a>
js代码如下:
<script language="javascript"> <!-- last=document . getElementById("last").href; next=document . getElementById("next").href; booklist=document . getElementById("booklist").href; function keyUp(e) { if(navigator.appName == "Microsoft Internet Explorer") { var keycode = event.keyCode; var realkey = String.fromCharCode(event.keyCode); }else { var keycode = e.which; var realkey = String.fromCharCode(e.which); } if(keycode==39){ window.location.href=next; } if(keycode==37){ window.location.href=last; } if(keycode==13){ window.location.href=booklist; } } document.onkeydown = keyUp; //--> </script>
今天从网上看到这个功能,不错啊,以后就可以在文章中,增加这个功能了
var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?上一页[])>]?</a>/igm; if (window.document.body.innerHTML.search(re) >= 0) { var PREVIOUS_PAGE = RegExp.$1; }
如果搜下到"上一页",则定义
var PREVIOUS_PAGE = RegExp.$1; var re = /<a href=["']?([-=w./?]+)["']?>[[(<]?下一页[])>]?</a>/igm; if (window.document.body.innerHTML.search(re) >= 0) { var NEXT_PAGE = RegExp.$1; }
如果搜下到"下一页",则定义
var NEXT_PAGE = RegExp.$1; if (typeof PREVIOUS_PAGE == "string" || typeof NEXT_PAGE == "string") { document.onkeydown = function() { switch (event.srcElement.tagName) { case "INPUT": case "TEXTAREA": case "SELECT": break; default: if (event.keyCode == 37 /* Arrow Left*/ && typeof PREVIOUS_PAGE == "string") { window.location.href = PREVIOUS_PAGE; } else if (event.keyCode == 39 /* Arrow Right */ && typeof NEXT_PAGE == "string") { window.location.href = NEXT_PAGE; } } } }
下面说一下我做过的一个上下翻页的快捷键实现。当用户点击左右方向键时,js获取键盘代码,然后跳转到下一页或者上一页,现在网上很多代码都是ie的,firefox下无法执行,很多时候都是因为ff下不支持非标准的**.click()造成的,ie下对A标签进行click操作默认转到了相应的网址,而ff下不可行(onClick()倒是可以,不过这是执行的A的onClick事件)。
解决办法也很简单,我们可以采用这个方法:捕获用户点击右方向键时,把下一页的A的href属性赋给window.location.href就可以了。
var $=function(id) { return document.getElementById(id); } var hotKey=function(e) { var e =e||event; var k = e.keyCode||e.which||e.charCode;//获取按键代码 if (k == 37) { if ($("prevPage")) window.location.href = $("prevPage").href; } else if (k == 39) { if ($("nextPage")) window.location.href = $("nextPage").href; } else if (k == 72) { if ($("home")) window.location.href = $("home").href; } } document.onkeydown = hotKey;//左右键
希望本文所述对大家基于javascript的web程序设计有所帮助。
相关文章推荐
- Js实现网页键盘控制翻页的方法
- js实现键盘控制DIV移动的方法
- js实现键盘控制DIV移动的方法
- 用JS实现禁止查看网页源代码方法总结
- 通过js脚本复制网页上的一个表格的不错实现方法
- 用js实现键盘方向键翻页功能的代码
- JS实现网页跳转的几种方法
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果(转)
- 使用 Cufon 渲染网页字体(转载自ibm developerwork,在网页里引入特殊字体的方法,通过js实现字体渲染)(1)
- 关于JS控制代码暂停的实现方法分享
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果
- JS实现网页版的键盘指法练习功能
- 用按钮控制iframe显示的网页实现方法
- js实现网页跳转的5种方法
- 使用js实现基于可视布局信息的网页噪音去除的测试方法
- 感觉很流畅的js实现的键盘控制(带惯性)
- 用JS实现的网页关键字高亮显示的方法
- 键盘实现网页翻页
- 树莓派实现web控制GPIO教程(安装方法更简单,网页效果更好)