Greasy Fork

Greasy Fork is available in English.

b站首页增加关注入口2.0

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

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

// ==UserScript==
// @name         b站首页增加关注入口2.0
// @version      2.0
// @description  在bilibili网页端上方菜单添加[关注]和[追番]的入口
// @author       冬瓜语
// @match        *://www.bilibili.com/*
// @match        *://space.bilibili.com/*
// @namespace http://greasyfork.icu/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、算法逻辑混乱,尚未修改。


*/