b站首页增加关注入口2.0

在bilibili网页端上方菜单添加[关注]和[追番]的入口

当前为 2019-06-07 提交的版本,查看 最新版本

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         b站首页增加关注入口2.0
// @version      2.0
// @description  在bilibili网页端上方菜单添加[关注]和[追番]的入口
// @author       冬瓜语
// @match        *://www.bilibili.com/*
// @match        *://space.bilibili.com/*
// @namespace https://greasyfork.org/users/307669
// ==/UserScript==
/*
--->>>自定义代码说明:
1、找到快捷网址:如知名up主“冬瓜语”首页网址:https://space.bilibili.com/21945167?from=search&seid=15909168246908519571
                                      截取其中部分   //space.bilibili.com/21945167?from=search&seid=15909168246908519571
2、复制到如下模板中
                             网址复制到此处                          更改名称(不要留空格)
                                   ||                                        ||
             <li><a href='       (网址)      '><span style='color: #000;'>名称</span></a></li>
例如:
             <li><a href='//space.bilibili.com/21945167?from=search&seid=15909168246908519571'><span style='color: #000;'>冬瓜语</span></a></li>

3、将修改好的代码复制脚本指定处(第33行)
4、每添加一个将行高值增加42
*/

(function() {
    var cookies = document.cookie;
    var id=cookies.match(/DedeUserID=(\d+)/)[1];
    go();
    function go(){
        var Obj=document.querySelector("[report-id=playpage_dynamic]");
        if(Obj){

            //若要修改自定义关注需修改下行代码 ******************************************************************************************************************************************************************************** 行高修改此处  ***********************************************************************************************    ||    *************************************************************************************************************************************************************************    ||    ***************************************************************************************************************************************************    ||    ************************************************************************************************************************************************************    ||    **************************************************************************************************************************************************    ||    ***********************************************************************************************************************************    ||    ********   添加至下行此处   ********    ||    ****************
            $("<li report-id='big_tab_click' class='nav-item'> <div id='close'> <a  id='ty' target='_blank' class='t' style='cursor:pointer'>关注</a><div id='hh' style='display: none;position: absolute;z-index: 1;width: 110px; height: 210px; background-color: #FFF; border-radius: 0 0 4px 4px; box-shadow:rgba(0,0,0,0.16) 0px 2px 4px; left:-35px'>       <ul id='u' class='sub-nav' style='padding: 0px;margin: 0px;'>          <a id='A' class='im-list' href='//space.bilibili.com/13354765?from=search&seid=12922729272232900617' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>徐大虾咯</a>        <a id='B' class='im-list' href='//space.bilibili.com/777536?from=search&seid=16593549343092558' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>Lex</a>        <a id='C' class='im-list' href='//space.bilibili.com/4578433?from=search&seid=15420041383128368457' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>老骚豆腐</a>     <a class='im-list' href='https://space.bilibili.com/38920056?from=search&seid=8514852173435949699'style='display: block; color: #222222;font-family:'Microsoft YaHei';'>急支糖浆</a>       <a class='im-list' href='//space.bilibili.com/14380285?from=search&seid=17704450911629917372'style='display: block; color: #222222;font-family:'Microsoft YaHei';'>瓦不管</a>                                                   </ul>     </div></div></li>").insertAfter(Obj);
            $("<li report-id='nop' class='nav-item'> <a href='//space.bilibili.com/"+id+"/bangumi' target='_blank' class='t'>追番</a></li>").insertAfter(Obj);

            /**
             *鼠标悬停触发事件
             */
            var oBtn1 = document.getElementById("ty");
            oBtn1.onmouseover = function(){
                document.getElementById("hh").style.display="";
            }

            var oBtn2 = document.getElementById("close");
            oBtn2.onmouseleave = function(){
                document.getElementById("hh").style.display="none";
            }



            /**
             *鼠标悬停产生阴影
             */
            var word = document.getElementsByClassName("im-list");
            for(var j in word)
            {
                word[j].onmouseover = function(){
                    this.style.background="#E5E9EF";
                    this.style.color="#00AED6";
                    this.style.borderRadius="0 0 4px 4px";       //会使每一个超链接被选中时都变成圆角
                }
                word[j].onmouseout = function(){
                    this.style.background="white";
                    this.style.color="black";
                    this.style.borderRadius="0 0 4px 4px";       //会使每一个超链接被选中时都变成圆角
                }
            }



        }else{setTimeout(go,500);}
    }

})();


/*
更新日志:


version 2.0      2019/6/7
    1、更改了事件的触发方式,将“点击”触发替换成“悬停”触发。
    2、优化了鼠标选中时改变背景色和字体颜色。
    3、优化了菜单栏的圆角。
    4、优化了菜单栏的阴影。
    5、优化了字体。
    6、优化了菜单栏的居中。
    7、优化了代码逻辑。

    待解决的问题:
    1、存在鼠标悬停在最后一个超链接时改变背景色的同时会改变圆角的bug,修复后解决了此bug但又出现了使每一个超链接被选中时都变成圆角的新bug。
    2、子菜单弹出没有实现延迟显示功能。
    3、子菜单没有实现淡入淡出的效果。
    4、鼠标频繁选中会导致菜单频繁打开。



version 1.0      2019/6/3
    1、增添了【追番】入口。
    2、增添了【关注】入口。
    3、添加了子菜单栏。

    待解决的问题:
    1、【关注】入口的事件触发方式目前为“点击”,悬停触发事件的方式目前存在不可抗拒的Bug,后续版本更新中会陆续解决。
    2、子菜单中鼠标悬停还不能更改背景色。
    3、子菜单弹出没有实现延迟显示功能。
    4、子菜单没有实现圆角和阴影的样式。
    5、子菜单位置整体偏右。
    6、添加关注元素时需改动的代码过多。
    7、算法逻辑混乱,尚未修改。


*/