下载链接地址：https://share.weiyun.com/9ac3ca3fb29648bb1aad1b83a76b123c （密码：4y9t）【含mini版】
欢迎使用leonaScroll-1.3.js，如您在使用过程中发现更多问题，欢迎指正！
介绍：是一款基于jquery框架实现的自定义竖向自适应滚动条。
插件大小：leonaScroll-1.2 .js 10.2KB
leonaScroll-min-1.2.js 6.39KB
更新：1.3版本
1、滚动文本未超出可显示区域时，滚动条button显示不正常问题
2、脱离了原来的mousewheel插件，仅基于jq
3、更正了用法介绍文字错误
使用方法：
1、建立好您的Html，引用jquery框架、leonaScroll-1.3.js插件
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/leonaScroll-source-1.2.js"></script>
2、使用$("Element").LeonaScroll()调用插件
3、属性使用说明：
**多个属性之间用“ , ”分隔
**属性值需要“{ }”括起来
**属性默认有值，全部为可选，可根据需求设置合适的属性，以符合您的页面需求
**即$("Element").LeonaScroll({属性名:属性值,属性名:属性值})
leonaScroll-1.3.js——属性
scroll_text 滚动文本类名
- 默认：该方法选中元素的第一个子元素，并默认给其添加一个名为“scroll_text”class类名
- 解释：可自定义你需要滚动的文本类名，默认为调用方法下的第一个子元素，填写滚动文本类名即可，规则和css一样，如.class或#id或li
- 用法：$("Element").LeonaScroll({scroll_text :‘.class‘})
speed 滚动速度
- 默认：20px
- 解释：可自定义调节滚动的快慢，以像素定义，数字越大越快，越小越慢
- 用法：$("Element").LeonaScroll({speed:50})
sWidth 滚动条宽度
- 默认：14px
- 解释：可自定义滚动条整体宽度，以像素为单位，填入数字即可
- 用法：$("Element").LeonaScroll({sWidth :14})
updownH 微调按钮高度
- 默认：20
- 解释：可自定义滚动条上下箭头（微调按钮）高度，其宽度会根据滚动条宽度自适应，你只需定义好滚动条宽度即可
- 用法：$("Element").LeonaScroll({updownH :20})
text_width 滚动文本内容宽度
- 默认：滚动文本内容宽度=调用方法时选中的对象宽度-滚动条宽度
- 解释：如果你希望的滚动条与滚动文本之间有一定间隔，你可以自定义滚动文本的内容的宽度，这里的滚动文本定位采用的float:right; 滚动条采用float:left，以像素为单位，填写数字即可
- 用法：$("Element").LeonaScroll({text_width :400})
scrollbar 未超出时滚动条显示否
- 默认：true
- 解释：滚动文本未超出可显示区域时，滚动条是否显示，显示为false，不显示为true
- 用法：$("Element").LeonaScroll({scrollbar :20})
addHeight 动态输出修复高度
- 默认：0px
- 解释：文本内容实际高度增加（加高），此属性是为了解决部分因动态数据加载慢于滚动条插件加载时，导致插件无法获取到准确的可显示文本高度，从而造成显示文本内容丢失。该属性可以硬性给可显示文本增加高度。
- 用法：$("Element").LeonaScroll({addHeight :40})
autoStyle 默认美化样式
- 默认：true
- 解释：是否需要默认的美化样式，需要为true，不需要为false，如不需要则需要自定义美化样式，因此，该属性要和美化样式属性搭配使用，不能单独使用，否则会出现乱码，小白慎用，大神随意
- 用法：$("Element").LeonaScroll({autoStyle :false})
美化样式属性
- 类型：autoStyle属性值为true是需要，为false则是必须
- 默认：黑色样式,如图：
- 属性说明：
- scroll_UDCss:滚动条的上下微调按钮样式
- scroll_upCss:滚动条的上微调按钮样式
- scroll_upCssHover:滚动条的上微调按钮鼠标悬停样式
- scroll_downCss:滚动条的下微调按钮样式
- scroll_downCssHover:滚动条的下微调按钮鼠标悬停样式
- scroll_cenCss:滚动条中间轨道样式
- scroll_cenButtonCss:滚动条中间滑动按钮样式
- 样式使用举例：
- autoStyle: false,
- scroll_UDCss: "background-image: url(img/bw.png); background-repeat: no-repeat;",
- scroll_upCss: "background-position: center 6px; border-radius: 5px 5px 0 0;",
- scroll_upCssHover: "background-position: center -11px;",
- scroll_downCss: "background-position: center -49px; border-radius: 0 0 5px 5px;",
- scroll_downCssHover: "background-position: center -31px;",
- scroll_cenCss: "",
- scroll_cenButtonCss: "background: url(img/tiao.jpg) repeat-y 0 0; border-radius: 5px;"
- 图示说明：
插件代码：
1 $.fn.extend({
2 LeonaScroll: function (parameter) {
3 parameter = parameter === undefined ? {} : parameter;
4 var Sname = $(this).selector;
5 var allar = this;
6 return this.each(function () {
7
8 var havedefsrolltext = $(this).find(parameter.scroll_text).length;
9 if (!havedefsrolltext) {
10 parameter.scroll_text = ".scroll_text";
11 $($(this).children().get(0)).addClass("scroll_text");
12 }
13 //变量声明
14 var elem = $(this),
15 celem = $(this).find(parameter.scroll_text),
16 index = Sname.replace(".", "").toUpperCase() + $(Sname).index($(this)),
17 text_hidden = $(elem).height(),
18 con_width = $(elem).width();
19 $(elem).unbind();
20
21 //添加滚动条Html
22 var cansc = $(".leonaup" + index + "").length;
23 if (!cansc) {
24 var scrollHTML = "";
25 scrollHTML += "<div class=‘scroll_up leonaup" + index + "‘></div>";
26 scrollHTML += "<div class=‘scroll_cen leonacen" + index + "‘><div class=‘scroll_button leonabutton" + index + "‘></div></div>";
27 scrollHTML += "<div class=‘scroll_down leonadown" + index + "‘></div>";
28 $(elem).append("<div class=‘scroll leonas" + index + "‘> " + scrollHTML + "</div>");
29 }
30
31 //滚动条CSS--必要
32 var sW = parameter.sWidth === undefined ? 14 : parameter.sWidth;
33 var scrollStyle = Sname + "{ position: relative; overflow-y: hidden; clear:none;-moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }\r\n";
34 scrollStyle += Sname + " " + parameter.scroll_text + "{width:" + (parameter.text_width === undefined ? (con_width - sW) : parameter.text_width) + "px; word-break: break-word; position: absolute; left: 0; top: 0; clear:both; }\r\n";
35 scrollStyle += Sname + " .scroll { height:" + text_hidden + "px; float:right; }\r\n";
36 scrollStyle += Sname + " .scroll," + Sname + " .scroll .scroll_cen, " + Sname + " .scroll .scroll_up, " + Sname + " .scroll .scroll_down { width:" + sW + "px; }\r\n"
37 scrollStyle += Sname + " .scroll .scroll_up," + Sname + " .scroll .scroll_down {height:" + (parameter.updownH === undefined ? 20 : parameter.updownH) + "px; cursor: pointer;}\r\n";
38 scrollStyle += Sname + " .scroll .scroll_cen { height:" + (text_hidden - (parameter.updownH === undefined ? 20 : parameter.updownH) * 2) + "px; position: relative; }\r\n";
39 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { width:" + (sW - 2) + "px; margin: 0px 1px; position: absolute; cursor: pointer; }\r\n";
40
41 //滚动条美化CSS--默认
42 var needAutoStyle = parameter.autoStyle === undefined ? true : parameter.autoStyle
43 if (needAutoStyle == true) {
44 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down { background-image: url(/images/bw.png); background-color: #161515; background-repeat: no-repeat; }\r\n";
45 scrollStyle += Sname + " .scroll .scroll_up { background-position: center 6px; border-radius: 5px 5px 0 0;} \r\n ";
46 scrollStyle += Sname + " .scroll .scroll_up:hover { background-position: center -11px;} \r\n";
47 scrollStyle += Sname + " .scroll .scroll_down { background-position: center -49px; border-radius: 0 0 5px 5px;} \r\n";
48 scrollStyle += Sname + " .scroll .scroll_down:hover { background-position: center -31px;}\r\n ";
49 scrollStyle += Sname + " .scroll .scroll_cen { background-color: #777676;}\r\n ";
50 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { background: url(/images/tiao.jpg) repeat-y 0 0; border-radius: 5px;}\r\n ";
51 } else {
52 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down {" + parameter.scroll_UDCss + "}\r\n";
53 scrollStyle += Sname + " .scroll .scroll_up {" + parameter.scroll_upCss + "}\r\n ";
54 scrollStyle += Sname + " .scroll .scroll_up:hover {" + parameter.scroll_upCssHover + "}\r\n";
55 scrollStyle += Sname + " .scroll .scroll_down { " + parameter.scroll_downCss + "}\r\n";
56 scrollStyle += Sname + " .scroll .scroll_down:hover {" + parameter.scroll_downCssHover + "}\r\n ";
57 scrollStyle += Sname + " .scroll .scroll_cen {" + parameter.scroll_cenCss + "}\r\n ";
58 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { " + parameter.scroll_cenButtonCss + "}\r\n ";
59 }
60
61 //添加上述样式至html头部head中
62 if ($("#leonascrollStyle").length) {
63 $("#leonascrollStyle").html($("#leonascrollStyle").html() + scrollStyle);
64 } else {
65 $("head").append("<style type=‘text/css‘ id=‘leonascrollStyle‘>" + scrollStyle + "</style>");
66 }
67
68 //变量声明
69 var text_show = parameter.addHeight === undefined ? $(celem).height() : $(celem).height() + parameter.addHeight,
70 scroll_b = $(".leonabutton" + index + ""),
71 text_p = text_hidden / text_show,
72 bH_max = $(".leonas" + index + " .leonacen" + index + "").height(),
73 bH = text_p * bH_max;
74 if (parameter.scrollbar == true || parameter.scrollbar === undefined) {
75 if (text_p >= 1) {
76 $(".leonas" + index + "").css("display", "none")
77 }
78 else {
79 $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px");
80 };
81 } else if (parameter.scrollbar == false) {
82 if (text_p >= 1) {
83 $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH_max + "px");
84 bH = bH_max;
85 return false;
86 }
87 else {
88 $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px");
89 };
90 };
91 //鼠标拖动div事件
92 var needMove = false, mouseY = 0;
93 scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });
94 $(document).mouseup(function (event) { needMove = false; });
95 $(document).mousemove(function (event) {
96 if (needMove) {
97 var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;
98 if (bH_Top <= 0) {
99 scroll_b.css("top", 0);
100 $(celem).css("top", 0);
101 return;
102 }
103 if (bH_Top >= bH_max - bH) {
104 scroll_b.css("top", bH_max - bH);
105 $(celem).css("top", text_hidden - text_show);
106 return;
107 }
108 scroll_b.css("top", bH_Top); $(celem).css("top", -textY);
109 }
110 return;
111 });
112
113 //定义上下滚动规则
114 function goGun(direction, timer) {
115 bH_Top = scroll_b.position().top;
116 var h = 0; h += (parameter.speed === undefined ? 20 : parameter.speed);
117 if (direction == 1) {
118 var Toping = bH_Top - h;
119 if (bH_Top <= 0 || Toping <= 0) {
120 scroll_b.css("top", 0);
121 $(celem).css("top", 0);
122 if (timer == 2) clearInterval(goThread);
123 return;
124 }
125 scroll_b.css("top", bH_Top - h);
126 }
127 if (direction == -1) {
128 var Downing = bH_Top + h;
129 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
130 scroll_b.css("top", bH_max - bH);
131 $(celem).css("top", text_hidden - text_show);
132 if (timer == 2) clearInterval(goThread);
133 return;
134 }
135 scroll_b.css("top", bH_Top + h);
136 }
137 var textY = bH_Top / bH_max * text_show;
138 $(celem).css("top", -textY);
139 }
140
141 //上下微调按钮事件
142 function minTiao(minTB, d, t) {
143 var goThread = "";
144 minTB.mouseup(function () { clearInterval(goThread); });
145 minTB.mousedown(function () {
146 clearInterval(goThread);
147 goThread = setInterval(function () { goGun(d, t); }, 300);
148 });
149 minTB.click(function () { goGun(d); });
150 }
151 minTiao($(".leonaup" + index + ""), 1, 2);
152 minTiao($(".leonadown" + index + ""), -1, 2);
153
154
155
156 //判断鼠标上下滚动方向
157 var delta;
158 var scrollFunc = function (e) {
159 e = e || window.event;
160 if (e.wheelDelta) {
161 if (e.wheelDelta > 0) { delta = 1 }
162 if (e.wheelDelta < 0) { delta = -1 }
163 } else if (e.detail) {
164 if (e.detail > 0) { delta = 1 }
165 if (e.detail < 0) { delta = -1 }
166 };
167
168 //滚轮事件
169 if (text_p < 1) {
170 if (cansc <= 1) {
171 if (delta == 1) {//up
172 goGun(1, 0);
173 if (scroll_b.position().top != 0)return false;
174 } if (delta == -1) {//down
175 goGun(-1, 0);
176 if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))return false;
177 }
178 }
179 };
180 }
181
182 //当鼠标悬停在元素上的时候给页面绑定滚动事件
183 $(elem).hover(function () {
184 if (document.addEventListener) {
185 document.addEventListener(‘DOMMouseScroll‘, scrollFunc, false);
186 }
187 window.onmousewheel = document.onmousewheel = scrollFunc;
188 }, function () {//否则解绑滚动事件
189 if (document.addEventListener) {
190 document.removeEventListener(‘DOMMouseScroll‘, scrollFunc, false);
191 }
192 window.onmousewheel = document.onmousewheel = null;
193 });
194
195 });
196 }
197
198 });
作者：leona
原文链接：http://www.cnblogs.com/leona-d/p/5950280.html
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
时间： 2024-10-08 00:33:07