目的:
用鍵盤替代鼠標,做一個安靜刷知乎的美男(女)子!
功能:
功能 | 按鍵 | 說明 |
直接定位到搜索框 | q | |
打開 首頁 | w | |
打開 話題 | e | |
打開 發現 | r | |
打開 消息 | m | |
打開 個人主頁 | u | |
打開 我的草稿 | c | |
打開 我的收藏 | s | |
打開 關注的問題 | g | |
打開 邀請我回答的問題 | y | |
打開當前可見范圍內的第一個問題 | 回車 | 僅針對<首頁>下的<最新動態> |
自動加載 更多 | 空格或者↓ | 僅針對頁面加載方式為滾動加載時 |
上一頁or下一頁 | ← or → | 僅針對頁面加載方式為翻頁加載 |
忘記這些快捷鍵時,直接敲擊 h 鍵,會彈出幫助信息。 |
實現代碼
只介紹關鍵的兩個:
1)自動加載更多
說明:當刷最新動態時,在不斷滾動的過程中,底部會出現‘更多’按鈕,每次都需要用鼠標點擊一下
思路:當每次滾動至底部時,自動觸發‘更多’按鈕的點擊事件。
實現代碼:
if(e.keyCode==40||e.keyCode==32){
//下箭頭 || 空格
var scrollTop = $(window).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(window).height();
if(scrollTop + windowHeight == scrollHeight){
document.getElementById('zh-load-more').click();
}
}
2)打開當前可見范圍內的第一個問題
說明:刷最新動態時,看到感興趣的問題,每次都需要手動點擊一下,能不能直接敲擊回車,一鍵打開這個問題呢?答案是肯定的。
思路:通過分析html源碼,得知每個問題都是一個固定高度的div。所以可以通過得到當前滾動條的Y坐標,除以div的高度,就可以得到目標。
實現代碼:
if(e.keyCode==13) {
//回車:直接打開最接近頂部的那條問題
//每條問題的height==219
var y= GetPageScroll().Y; //滾動條的位置
var index =parseInt(parseInt(y)/220); //當前的div
var title= $('#js-home-feed-list div.feed-item').eq(index).find('h2').html();
var a_href = $('#js-home-feed-list div.feed-item').eq(index).find('h2').find('a').attr('href');
window.open('https://www.zhihu.com'+a_href);
}
function GetPageScroll()
{
var x, y;
if(window.pageYOffset){
// all except IE y = window.pageYOffset;
x = window.pageXOffset;
}
else if(document.documentElement && document.documentElement.scrollTop){
// IE 6 Strict y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
}
else if(document.body) {
// all other IE y = document.body.scrollTop;
x = document.body.scrollLeft;
}
return {X:x, Y:y};
}
完整代碼:=請點擊我=
V1.0:只是簡單實現了上一頁、下一頁功能,詳情請點擊我!
本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。