在bilibili网页端上方菜单添加[关注]和[追番]的入口
当前为
// ==UserScript==
// @name b站首页增加关注和追番入口
// @version 3.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、复制到如下模板中
网址复制到此处 更改名称（不要留空格）
| |
V V
复制此行 <a class='im-list' href=' （网址） ' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>名称</a>
例如：
<a class='im-list' href='//space.bilibili.com/21945167?from=search&seid=15909168246908519571' style='display: block; color:#222222;font-family:'Microsoft YaHei';'>冬瓜语</a>
3、将修改好的代码复制脚本指定处（第35行）
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 href='//space.bilibili.com/"+id+"/fans/follow' id='ty' target='_blank' class='t' >关注</a><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' class='sub-nav' style='padding: 0px;margin: 0px;'> <a class='im-list' href='//space.bilibili.com/13354765?from=search&seid=12922729272232900617' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>徐大虾咯</a> <a class='im-list' href='//space.bilibili.com/777536?from=search&seid=16593549343092558' style='display: block; color: #222222;font-family:'Microsoft YaHei';'>Lex</a> <a 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);
/**
*鼠标悬停触发事件
*/
$(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";
}
});
});
/**
*鼠标悬停产生阴影
*/
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="#FFF";
this.style.color="#222222";
this.style.borderRadius="0 0 4px 4px"; //会使每一个超链接被选中时都变成圆角
}
}
}else{setTimeout(go,500);}
}
})();
/*
参考资料：脚本“b站首页增加已追番入口 by franxx”
特别说明：此脚本为作者初学时编写，如有任何问题欢迎联系作者（e-mail：[email protected]）
更新日志：
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、算法逻辑混乱，尚未修改。
*/