首先我的目录是在marvin的基础上二次开发的.然后我发现锚点图和目录都在同一个图上面,所以就一起用了.
返回顶部锚点:
我用以前旧版bilibili的那个函数.可以做到平滑滚动到页面,并且在触顶前不能向下滚屏.具体的看我参考链接.当然因为涉及到js要申请权限,简单的话a标签href用#top当然可以,体验有点差罢了.
然后因为我懒,锚点的出现条件直接和目录的出现条件弄在一起.也就是匹配元素相对滚动条顶部的偏移超过200时显示.
tag云:
我用Google随便找的.用的矢量绘图.
但是这玩意有个局限性,就是其实例化函数限制要用元素ID.于是我用一个div包裹了标签区的ul.然后实例化.实例化成功的时候隐藏掉标签区和标题,设置canvas的蠕动和显示
window.onload=function(){
$("ul:first","#sidebar_categories").wrap("<div id='caonimagebi' style='display:block'></div>")
if(!$('#myCanvas').tagcanvas({
textColour: '#519cea',
outlineColour: '#404040',
reverse: true,
depth: 0.8,
maxSpeed: 0.10
},'caonimagebi')) {
console.log("日了狗了")
$('#myCanvasContainer').hide();
}
else{
$('#myCanvasContainer').css('display', 'block');
$('#myCanvas').tagcanvas("setspeed", [0.015, -0.05]);
$('#caonimagebi').css('display', 'none');
$('.catListTitle:first-child','#sidebar_categories').empty();//去掉随笔分类
}
}
但是这样有个局限性,就是因为写在onload里面,有点生硬,你们可以看到,这玩意像是隐搞出来的,不和谐.这就是让我抓狂的地方了.
抓狂:
我就是很好奇,为毛这个包裹方法写在onready里面就不行了,而且是线上的时候不行.我是有在本地测试的,本地写在onready的时候页面很正常,传到博客园就变成这样.
博客园,你们家的js好神奇
备注:
1博客园的文件系统是软删除,慢更新.就是你删了文件还在,你删了那个文件上传同名文件的话,服务器上的文件还是旧版的,所以需要自己手动修改文件名和相应的引用文件名.
2这个目录有一定的局限性,也就是h2,h3,h4.方法写的不是很健壮,而且目录的高度应该尽可能的根据标题数来计算,然后弄个上限,但是我也懒得改了.还有就是z-index的问题.这个要格外注意下.我是把旁边的锚点和返回顶部设置为999了.
3博客园自带jQuery.所以无需另外引用
参考链接:
如何给你的为知笔记添加一个漂亮的导航目录
http://www.goat1000.com/tagcanvas-functions.php
