Js实现网页键盘控制翻页程序代码

Vedu • 2016-10-15 21:31 • 程序开发 • 阅读 1651

键盘控制翻页效果我想我们不少见了，经常在很多网站特别是相册的效果都可以直接使用键盘进行上下页进行翻页了，原理很简单，只要利用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;

}//xiariboke.com

}

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;

}//xiariboke.com

}

document.onkeydown = hotKey;//左右键

内容出处：，

声明：本网站所收集的部分公开资料来源于互联网，转载的目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品，请与我们取得联系，我们会及时修改或删除。文章链接：http://www.yixao.com/procedure/804.html

Js实现网页键盘控制翻页程序代码

相关推荐

发表评论