jQuery猫咪滚动进度条

所属分类:UI-滚动

 7989  82  查看评论 (2)
分享到微信朋友圈
X
jQuery猫咪滚动进度条 ie兼容11

更新时间: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 //从顶部到底部滑动的时长
});

具体可以下载源文件查看

相关插件-滚动

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 41500  353

jquery页面滚动定位(支持上下滑动)

jquery页面滚动定位(支持上下滑动)
  滚动
 52427  396

jquery文字上下滚动

jquery文字上下滚动插件jqScroll.js调用简单,代码注释很清楚。
  滚动
 56934  510

类似fullPage的全屏滚动插件

这是一款类似fullPage的全屏滚动插件,使用很简单
  滚动
 49322  415

讨论这个项目(2)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    boringnomyukikun 1
    2021/2/1 1:14:37
    新增了自动生成目录的功能(说实话版本审核有点慢啊【狗头】),应该不会在更新了,喜欢就点个收藏呗 ( ̄? ̄)~■干杯□~( ̄? ̄)
        西瓜0
        2021/2/1 1:48:03

        抱歉,双休日慢,工作日当天审核完。

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复