zoukankan      html  css  js  c++  java
  • 【鬼脸原创】谷歌扩展--知乎V2.0

    目的

            用键盘替代鼠标,做一个安静刷知乎的美男(女)子!

    功能

     
    功能 按键 说明
    直接定位到搜索框 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只是简单实现了上一页、下一页功能,详情请点击我!

  • 相关阅读:
    博客园博客排版(js样式实例)
    vue项目iframe的传值问题
    纯css、js 的H5页面对接echarts
    css 在一定区域内滚动显示,不修改父级样式
    架构图以及vue的简介
    HTTP协议 详解
    mysql:The user specified as a definer ('xxx'@'%') does not exist 解决方法
    table-tree 表格树、树形数据处理、数据转树形数据
    记我在github上参与的Star增长最快的十万级项目。。。
    浏览器将URL变成一个屏幕上显示的网页的过程?
  • 原文地址:https://www.cnblogs.com/lanleiming/p/5259424.html
Copyright © 2011-2022 走看看