jQuery leonaScroll 1.1 自定义滚动条插件(推荐)

2020-05-29 07:04:19易采站长站整理

leonaScroll-1.1最新版

leonaScroll-1.1.js

欢迎使用leonaScroll-1.1.js,如您在使用过程中发现更多问题,欢迎指正!

更新:1.1版本

1、修复了前面初始版本中的一些bug,比如不能自适应用户的文本内容,css文件繁杂

2、用户只需调用一个方法即可使用该插件,无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素,显得更为自由

3、增设了滚动条宽度、上下微调按钮高度,滚动文本区域的设置

4、增设了文本内容未超出时是否显示滚动条可选设置选项,如不设置,默认为不显示

5、增设了滚动文本宽度的可选设置选项,如不设置会自动为您适配到最佳宽度

使用方法:

1、建立好您的Html,引用jquery框架与mousewheel插件,及我们的leonaScroll-1.1.js插件

2、使用$(“”)..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件

3、属性说明:

speed 滚动速度,必须

scroll_text 滚动文本内容class,必须

sWidth 滚动条宽度,必须

updownH 上下微调按钮高度,必须

scrollbar 文本内容未超出时是否显示滚动条,显示为false,不显示为true,可选,默认为true

text_width 滚动文本宽度,可选

leonaScroll-1.0仅供学习参考使用,该版本为本人学习时思路版,尚有不足,新版本修复了很多问题,但仍然存在着二次调用问题。不过已经有了解决方案,只是本人比较赖,没有修复,等待1.2版本修复吧!哈哈!

当然如果有人使用后遇到bug或者不方便的地方,欢迎提出,以便本人继续改进。

学习之余写的小插件,如有什么不足之处,还望见谅。

最后感谢在本插件开发过程中,帮助和解答过我疑问的朋友。尤其感谢Delevin先生的大力解惑!

废话不说了,附js代码和下载地址

一、Html+Css


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/mousewheel.js" type="text/javascript"></script>
<script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script>
<style type="text/css">
.left,.Explain,.center,.welcome,.right,.usage{ height:300px;}
.left,.Explain,.Explain_text{ width:200px;}
.right,.usage,.usage_text{ width:700px;}
.center,.welcome,.welcome_text{ width:300px;}
.left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}
.Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }