jQuery自定义滚动条（原创）

更新时间：2021-03-11 09:16:14

更新说明：插件可支持ie9以上浏览器，之前demo.html演示文件不能使用是因为demo.html中使用了es6的模板字符串所导致的；另外修复了同时存在多个滚动条时，滚轮事件有冲突的bug;修复了同时存在多个滚动条时，键盘方向键事件有冲突的bug,目前只允许存在一个键盘方向事件，若同时存在多个事件，则只有第一个会生效；最后更新一下使用方法；

使用方法：

1、需要文件:

• js--jquery.min.js,jquery.inputProgressBar.min.js

• css--jquery.smilebar.min.css

• img--smilebarImg

2、引入: 

3、使用: 

4、注意： 

 1）"#Ele",各选择器尽量用id选择器,确保唯一性

 2）该元素宽高必须为固定宽高； 

 3）当该元素宽高会动态改变时， 需要在改变的时候调用update() 方法； 

 4）若需要动态添加内容， 需要添加到$("Ele>smilerbar-content") 内；

5、配置:

更新时间：2021-03-10 00:18:25

使用方法

所需文件 css--jquery.smilebar.min.css js--jquery.min.js，jquery.smilebar.min.js img--smilebarImg   

抓手图引入 

使用 

Ele-- > 需要使用滚动条的元素选择器 

注意： 

• 该元素宽高必须为固定宽高； 

• 当该元素宽高会动态改变时， 需要在改变的时候调用update() 方法； 

• 若需要动态添加内容， 需要添加到$("Ele>smilerbar-content") 内；

配置config:    

• type:类型 *          默认 "xy"       //x:水平  y:垂直    除"x"和"y":水平垂直 *    

• size:滚动条大小 *          默认12px *    

• color:滚动条颜色 *          默认#252a35 *    

• silderSize:滑块大小 *          默认60%   范围[20%-100%] *    

• silderColor:滑块颜色 *          默认#404550 *    

• clickBln:点击开关 *          默认true       //其他激活方法：实例加上字段:data-click="true" *     

• keyBln:键盘开关 *          默认true       //其他激活方法：实例加上字段:data-key="true" *    

• keySpeed:键盘移动速率 *          默认 1   范围[0-100] *     

• wheelBln:滚轮开关 *          默认true       //其他激活方法：实例加上字段:data-wheel="true" *     

• wheelSpeed:键盘移动速率 *          默认 1   范围[0-100] *    

• handBln:抓手功能开关 *          默认false      //其他激活方法：实例加上字段:data-hand="true" *     

• handSpeed:抓手速率 *          默认 30  范围[0-100] *     

• initPosition：初始移动位置 *          默认{x:0,y:0}  //{三种写法：1:number(px单位)   2：string("%"单位)   3：string  ("first":顶端   "center"：中间   "last":末尾) 

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com