jQuery猫咪滚动进度条

 查看演示  website  立即下载

更新时间：2021-02-01 00:09:31

更新说明：添加了自动生成目录的功能，以实现快速导航

一个页面有多个neko scroll时，需要设置nekoname来区分不同的neko scroll，虽然如此，但还请一个页面一个neko scroll，不然会出问题，节点名冲突，主要是我懒得改了

nekoname其实就是id,默认为neko

默认（去掉以下注释，并注释掉其他的查看效果)

//$("#myscoll").nekoScroll();

部分自定义

$("#myscoll").nekoScroll({
    blog_body: ".blog-body", //所有目录标题的父节点，为了更好的定位目录，如 .classname,#idname,tagname，默认为标签 body，建议不使用默认，最好另外设置该选项
    catalog_item: ".catalog-item", //目录标题的选择器，为了识别博客文章目录，如 .classname,#idname,tagname，默认为标签 h3，建议不使用默认，最好另外设置该选项
    readColor: "red", //已经阅读过内容的目录颜色
    readColor: "#70a1ff", //已经阅读过内容的目录颜色,默认为 #109DFF
    unreadColor: "#57606f" //未阅读过内容的目录颜色，默认为 #2f3542
});

自定义（ 去掉以下注释， 并注释掉其他的查看效果）

$("#myscoll1").nekoScroll({
    nekoname:'neko1', //nekoname，相当于id
    nekoImg:'img/猫咪.png', //neko的背景图片
    scImg:"img/绳1.png", //绳子的背景图片
    bgcolor:'#1e90ff', //背景颜色，没有绳子背景图片时有效
    zoom:0.9, //绳子长度的缩放值
    endMsg:'已经结束了', //滑动到底部后的对话框信息
    hoverMsg:'你好~喵', //鼠标浮动到neko上方的对话框信息
    right:'100px', //距离页面右边的距离
    fontFamily:'楷体', //对话框字体
    fontSize:'14px', //对话框字体的大小
    color:'#1e90ff', //对话框字体颜色
    scroWidth:'8px', //绳子的宽度
    z_index:100, //不用解释了吧
    during:1200, //从顶部到底部滑动的时长
    blog_body:".blog-body", //所有目录标题的父节点，为了更好的定位目录，如 .classname,#idname,tagname， 默认为标签 body，建议不使用默认，最好另外设置该选项
    catalog_item:".catalog-item", //目录标题的选择器，为了识别博客文章目录，如 .classname,#idname,tagname，默认为标签 h3，建议不使用默认，最好另外设置该选项
    readColor:"red", //已经阅读过内容的目录颜色
    unreadColor:"black" //未阅读过内容的目录颜色
});

更新时间：2021-01-19 21:21:48

// 默认 
$("#myscoll").nekoScroll();
//自定义 
$("#myscoll1").nekoScroll({
    nekoname: 'neko1',
    //nekoname，相当于id 
    nekoImg: 'img/猫咪.png',
    //neko的背景图片 scImg:"img/绳1.png", 
    //绳子的背景图片 
    bgcolor: '#1e90ff',
    //背景颜色，没有绳子背景图片时有效 
    zoom: 0.9, //绳子长度的缩放值 
    endMsg: '已经结束了', //滑动到底部后的对话框信息 
    hoverMsg: '你好~喵', //鼠标浮动到neko上方的对话框信息 
    right: '200px', //距离页面右边的距离 
    fontFamily: '楷体', //对话框字体
    fontSize: '14px', //对话框字体的大小 
    color: '#1e90ff', //对话框字体颜色 
    scroWidth: '8px', //绳子的宽度 
    z_index: 100, //不用解释了吧 
    during: 1200 //从顶部到底部滑动的时长
});

具体可以下载源文件查看

PREVIOUS:
NEXT:
jQuery树插件ztree用户选择
jQuery弹窗插件syalert.js