这篇文章主要介绍了 Js 实现网页键盘控制翻页的方法, 较为详细的分析了 Js 实现网页键盘控制翻页的原理与具体实现方法, 非常具有实用价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 Js 实现网页键盘控制翻页的方法。分享给大家供大家参考。具体实现方法如下:
键盘控制翻页效果我想我们不少见了,经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了,原理很简单,只要利用 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 程序设计有所帮助。
来源: