b站首页增加[关注]列表

在bilibili网页端上方菜单添加[关注]的列表,可自定义更改关注列表,快速进入你关注的up主空间,无需任何专业知识即可修改代码。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==UserScript==
// @name         b站首页增加[关注]列表
// @version      4.0
// @description  在bilibili网页端上方菜单添加[关注]的列表,可自定义更改关注列表,快速进入你关注的up主空间,无需任何专业知识即可修改代码。
// @author       冬瓜语
// @match        *://www.bilibili.com/*
// @match        *://space.bilibili.com/*
// @namespace https://greasyfork.org/users/307669
// ==/UserScript==

/*
 *自定义代码说明:
     1、本脚本需要用户自定义修改代码。
     2、按照如下步骤修改即可,无需任何专业知识,简单快捷。
     3、请见33行至64行之间的【用户自定义代码区】,修改其中网址和up昵称即可。
     4、根据每个人关注数量的不同可以自由删除和添加数行代码(理论上无上限,但过多会影响美观)。
     5、多余的空格和空行不会对脚本产生影响。
     6、任何bug和改进的建议欢迎向作者反馈。
     7、如果版本更新,请事先复制备份自己的用户代码区,以免更新后代码遭到覆盖。
*/

(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 report-id='Focus' href='//space.bilibili.com/"+id+"/fans/follow' id='ty' target='_blank' class='t' >关注</a></div></li>").insertAfter(Obj);
            var Obj_menu=document.querySelector("[report-id=Focus]");
            $("<div id='hh' style='display:none;opacity:0;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; top:46px;left:-35px;'><ul id='u' report-id='UP' class='sub-nav' style='padding: 0px;margin: 0px;'></ul></div>").insertAfter(Obj_menu);
            var Obj_UP=document.querySelector("[report-id=UP]");

//============================
/*  || 用户自定义代码区 ||   */
//===============================================================================================================================================================================================================
/**
 *请修改以下代码:
 *实际列表顺序会为代码顺序的倒序,请自行调整顺序。
 */

//*************************************||       更换您关注的UP主首页网址            ||****************************************||   更改UP昵称   ||*************************
            $("<a class='im-list' href='    https://space.bilibili.com/13354765/     ' target='_blank' style='display: block; color: #222222;'>     徐大虾咯    </a>").insertAfter(Obj_UP);
            $("<a class='im-list' href='    https://space.bilibili.com/777536/       ' target='_blank' style='display: block; color: #222222;'>       Lex       </a>").insertAfter(Obj_UP);
            $("<a class='im-list' href='    https://space.bilibili.com/122879/       ' target='_blank' style='display: block; color: #222222;'>      敖厂长     </a>").insertAfter(Obj_UP);
            $("<a class='im-list' href='    https://space.bilibili.com/38920056/     ' target='_blank' style='display: block; color: #222222;'>     急支糖浆    </a>").insertAfter(Obj_UP);
            $("<a class='im-list' href='    https://space.bilibili.com/14380285/     ' target='_blank' style='display: block; color: #222222;'>      瓦不管     </a>").insertAfter(Obj_UP);






/**
 *添加更多关注列表可使用以下备用代码:
 *使用前请先删除每行开头的“//”符号
 */

//            $("<a class='im-list' href='                  网址5                      ' target='_blank' style='display: block; color: #222222;'>       UP主5     </a>").insertAfter(Obj_UP);
//            $("<a class='im-list' href='                  网址4                      ' target='_blank' style='display: block; color: #222222;'>       UP主4     </a>").insertAfter(Obj_UP);
//            $("<a class='im-list' href='                  网址3                      ' target='_blank' style='display: block; color: #222222;'>       UP主3     </a>").insertAfter(Obj_UP);
//            $("<a class='im-list' href='                  网址2                      ' target='_blank' style='display: block; color: #222222;'>       UP主2     </a>").insertAfter(Obj_UP);
//            $("<a class='im-list' href='                  网址1                      ' target='_blank' style='display: block; color: #222222;'>       UP主1     </a>").insertAfter(Obj_UP);

//===============================================================================================================================================================================================================

            /**
             *计算列表高度
             */
            var word = document.getElementsByClassName("im-list");
            var number=0;
            for(var i in word){number++;}
            var h=(number-3)*42;
            document.getElementById("hh").style.height = h+"px";


            /**
             *鼠标悬停触发事件
             */
            $(document).ready(function(){
                $("#ty").mouseenter(function(){
                    setTimeout(show,300);
                    function show(){
                            document.getElementById("hh").style.display="";
                            $("#hh").animate({
                                opacity: 1,
                                top:"42px",
                            },300);
                    }


                });
            });

            $(document).ready(function(){
                $("#close").mouseleave( function(){
                    $("#hh").animate({
                        opacity: 0,
                        top:"46px",
                    },300);

                    setTimeout(hid,300);    //动画结束后隐藏
                    function hid(){
                        document.getElementById("hh").style.display="none";
                    }
                });

            });


            /**
             *鼠标悬停产生阴影
             */
            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="#FFF";
                    this.style.color="#222222";
                    this.style.borderRadius="0 0 4px 4px";       //会使每一个超链接被选中时都变成圆角
                }
            }


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

})();


/*
参考资料:脚本“b站首页增加已追番入口 by franxx”
特别说明:此脚本为作者初学时编写,如有任何问题欢迎联系作者(e-mail:[email protected])


更新日志:


version 4.0      2019/6/9
    1、优化了代码结构。
    2、自动计算列表高度,方便用户自由增加或减少关注列表。
    3、修改了使用说明。



version 3.1      2019/6/8
    1、删除了【追番】入口。
    2、更改了脚本功能的描述。



version 3.0      2019/6/7
    1、实现了子菜单淡入淡出的同时滑动出场退场的效果。
    2、优化了子菜单的延迟显示效果。
    3、优化了代码算法逻辑。

    待解决的问题:
    1、鼠标悬停时每一个超链接都会变成圆角。
    2、当鼠标频繁选中和离开时会导致菜单频繁打开关闭。



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、算法逻辑混乱,尚未修改。


*/