Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法
本文實例講述了Js實現(xiàn)網(wǎng)頁鍵盤控制翻頁的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
鍵盤控制翻頁效果我想我們不少見了,經(jīng)常在很多網(wǎng)站特別是相冊的效果都可以直接使用鍵盤進行上下頁進行翻頁了,原理很簡單,只要利用js監(jiān)測用戶是否有按上下鍵即可實現(xiàn)。
舉例如下:
<a id="booklist" href="<?=$booklisturl?>">返回目錄</a>
<a id="next" href="<?=$righturl?>">下一章</a>
js代碼如下:
<!--
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>
今天從網(wǎng)上看到這個功能,不錯啊,以后就可以在文章中,增加這個功能了
if (window.document.body.innerHTML.search(re) >= 0) {
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;
}
如果搜下到"下一頁",則定義
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;
}
}
}
}
下面說一下我做過的一個上下翻頁的快捷鍵實現(xiàn)。當用戶點擊左右方向鍵時,js獲取鍵盤代碼,然后跳轉到下一頁或者上一頁,現(xiàn)在網(wǎng)上很多代碼都是ie的,firefox下無法執(zhí)行,很多時候都是因為ff下不支持非標準的**.click()造成的,ie下對A標簽進行click操作默認轉到了相應的網(wǎng)址,而ff下不可行(onClick()倒是可以,不過這是執(zhí)行的A的onClick事件)。
解決辦法也很簡單,我們可以采用這個方法:捕獲用戶點擊右方向鍵時,把下一頁的A的href屬性賦給window.location.href就可以了。
{
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中eval()函數(shù)和trim()去掉字符串左右空格應用
對于js中eval()函數(shù)的理解和寫一個函數(shù)trim()去掉字符串左右空格;對于js中eval()函數(shù)的理解是本人心得不一定正確,感興趣的朋友參考下,或許對你學習eval()函數(shù)有所幫助2013-02-02echarts多條折線圖動態(tài)分層的實現(xiàn)方法
這篇文章主要介紹了echarts多條折線圖動態(tài)分層的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-05-05JavaScript實現(xiàn)的鏈表數(shù)據(jù)結構實例
這篇文章主要介紹了JavaScript實現(xiàn)的鏈表數(shù)據(jù)結構實例,本文直接給出實現(xiàn)代碼,需要的朋友可以參考下2015-04-04JavaScript關于prototype實例詳解(超重點)
prototype是js里面給類增加功能擴展的一種模式,這篇文章主要介紹了JavaScript關于prototype(超重點),本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-08-08Javascript setInterval的兩種調(diào)用方法(實例講解)
這篇文章主要是對Javascript setInterval的兩種調(diào)用方法解析了詳細的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11