jquery-leonaScroll-1.2-自定义滚动条插件
欢迎使用leonaScroll-1.2.js，如您在使用过程中发现更多问题，欢迎指正！
介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义竖向滚动条。
插件大小：leonaScroll-1.2 .js 9.14KB
leonaScroll-min-1.2.js 4.2KB
更新：1.2版本
1、从js里将滚动条的背景、图片、颜色等样式提取出来，以方便用户自定义喜欢的样式
2、修复了滚动条同一页面二次加载时的错误
3、将其所有属性值变更为可选，简化了使用方法
使用方法：
一、建立好您的Html，引用jquery框架、mousewheel插件、leonaScroll-1.2.js插件
<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-source-1.2.js"></script>
二、使用$("").LeonaScroll()调用插件
三、属性使用说明：
多个属性之间用“ , ”分隔
属性值需要“{ }”括起来
属性默认有值，全部为可选，可根据需求设置合适的属性，以符合您的页面需求
(超出可显示文本区域时，自动显示滚动条)
leonaScroll-1.2.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 微调按钮高度
- 类型：必须
- 默认：无
- 解释：上下微调按钮高度
- 用法：$("Element").LeonaScroll({updownH :20})
text_width 滚动文本内容宽度
- 类型：可选
- 默认：调用方法选中元素宽-滚动条宽
- 解释：需要滚动区域的文本内容的宽度
- 用法：$("Element").LeonaScroll({text_width :false})
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:滚动条中间滑动按钮样式
- 图示说明：
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 var havedefsrolltext = $(this).find(parameter.scroll_text).length; 8 if (!havedefsrolltext) { 9 parameter.scroll_text = ".scroll_text"; 10 $($(this).children().get(0)).addClass("scroll_text"); 11 } 12 var elem = $(this), 13 celem = $(this).find(parameter.scroll_text), 14 index = Sname.replace(".", "").toUpperCase() + $(Sname).index($(this)), 15 text_hidden = $(elem).height(), 16 con_width = $(elem).width(); 17 $(elem).unbind(); 18 19 //添加滚动条Html 20 var cansc = $(".leonaup" + index + "").length; 21 if (!cansc) { 22 var scrollHTML = ""; 23 scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>"; 24 scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>"; 25 scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>"; 26 $(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>"); 27 } 28 29 //滚动条CSS--必要 30 var sW = parameter.sWidth === undefined ? 14 : parameter.sWidth; 31 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"; 32 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"; 33 scrollStyle += Sname + " .scroll { height:" + text_hidden + "px; float:right; }\r\n"; 34 scrollStyle += Sname + " .scroll," + Sname + " .scroll .scroll_cen, " + Sname + " .scroll .scroll_up, " + Sname + " .scroll .scroll_down { width:" + sW + "px; }\r\n"; 35 scrollStyle += Sname + " .scroll .scroll_up," + Sname + " .scroll .scroll_down {height:" + (parameter.updownH === undefined ? 20 : parameter.updownH) + "px; cursor: pointer;}\r\n"; 36 scrollStyle += Sname + " .scroll .scroll_cen { height:" + (text_hidden - (parameter.updownH === undefined ? 20 : parameter.updownH) * 2) + "px; position: relative; }\r\n"; 37 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { width:" + (sW - 2) + "px; margin: 0px 1px; position: absolute; cursor: pointer; }\r\n"; 38 39 //滚动条美化CSS--默认 40 var needAutoStyle = parameter.autoStyle === undefined ? true : parameter.autoStyle; 41 if (needAutoStyle == true) { 42 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down { background-image: url(img/bw.png); background-color: #161515; background-repeat: no-repeat; }\r\n"; 43 scrollStyle += Sname + " .scroll .scroll_up { background-position: center 6px; border-radius: 5px 5px 0 0;} \r\n "; 44 scrollStyle += Sname + " .scroll .scroll_up:hover { background-position: center -11px;} \r\n"; 45 scrollStyle += Sname + " .scroll .scroll_down { background-position: center -49px; border-radius: 0 0 5px 5px;} \r\n"; 46 scrollStyle += Sname + " .scroll .scroll_down:hover { background-position: center -31px;}\r\n "; 47 scrollStyle += Sname + " .scroll .scroll_cen { background-color: #777676;}\r\n "; 48 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { background: url(img/tiao.jpg) repeat-y 0 0; border-radius: 5px;}\r\n "; 49 } else { 50 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down {" + parameter.scroll_UDCss + "}\r\n"; 51 scrollStyle += Sname + " .scroll .scroll_up {" + parameter.scroll_upCss + "}\r\n "; 52 scrollStyle += Sname + " .scroll .scroll_up:hover {" + parameter.scroll_upCssHover + "}\r\n"; 53 scrollStyle += Sname + " .scroll .scroll_down { " + parameter.scroll_downCss + "}\r\n"; 54 scrollStyle += Sname + " .scroll .scroll_down:hover {" + parameter.scroll_downCssHover + "}\r\n "; 55 scrollStyle += Sname + " .scroll .scroll_cen {" + parameter.scroll_cenCss + "}\r\n "; 56 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { " + parameter.scroll_cenButtonCss + "}\r\n "; 57 } 58 if ($("#leonascrollStyle").length) { 59 $("#leonascrollStyle").html($("#leonascrollStyle").html() + scrollStyle); 60 } else { 61 $("head").append("<style type='text/css' id='leonascrollStyle'>" + scrollStyle + "</style>"); 62 } 63 64 var text_show = parameter.addHeight === undefined ? $(celem).height() : $(celem).height() + parameter.addHeight, 65 scroll_b = $(".leonabutton" + index + ""), 66 text_p = text_hidden / text_show, 67 bH_max = $(".leonas" + index + " .leonacen" + index + "").height(), 68 bH = text_p * bH_max; 69 if (parameter.scrollbar == true || parameter.scrollbar === undefined) { 70 if (text_p >= 1) { $(".leonas" + index + "").css("display", "none"); } else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); } 71 } 72 73 //鼠标拖动div事件 74 var needMove = false, mouseY = 0; 75 scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; }); 76 $(document).mouseup(function (event) { needMove = false; }); 77 $(document).mousemove(function (event) { 78 if (needMove) { 79 var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show; 80 if (bH_Top <= 0) { 81 scroll_b.css("top", 0); 82 $(celem).css("top", 0); 83 return; 84 } 85 if (bH_Top >= bH_max - bH) { 86 scroll_b.css("top", bH_max - bH); 87 $(celem).css("top", text_hidden - text_show); 88 return; 89 } 90 scroll_b.css("top", bH_Top); $(celem).css("top", -textY); 91 } 92 return; 93 }); 94 95 //定义上下滚动规则 96 function goGun(direction, timer) { 97 bH_Top = scroll_b.position().top; 98 var h = 0; h += (parameter.speed === undefined ? 20 : parameter.speed); 99 if (direction == 1) { 100 var Toping = bH_Top - h; 101 if (bH_Top <= 0 || Toping <= 0) { 102 scroll_b.css("top", 0); 103 $(celem).css("top", 0); 104 if (timer == 2) clearInterval(goThread); 105 return; 106 } 107 scroll_b.css("top", bH_Top - h); 108 } 109 if (direction == -1) { 110 var Downing = bH_Top + h; 111 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { 112 scroll_b.css("top", bH_max - bH); 113 $(celem).css("top", text_hidden - text_show); 114 if (timer == 2) clearInterval(goThread); 115 return; 116 } 117 scroll_b.css("top", bH_Top + h); 118 } 119 var textY = bH_Top / bH_max * text_show; 120 $(celem).css("top", -textY); 121 } 122 123 //上下微调按钮事件 124 function minTiao(minTB, d, t) { 125 var goThread = ""; 126 minTB.mouseup(function () { clearInterval(goThread); }); 127 minTB.mousedown(function () { 128 clearInterval(goThread); 129 goThread = setInterval(function () { goGun(d, t); }, 300); 130 }); 131 minTB.click(function () { goGun(d); }); 132 } 133 minTiao($(".leonaup" + index + ""), 1, 2); 134 minTiao($(".leonadown" + index + ""), -1, 2); 135 136 //滚轮事件 137 if (text_p < 1) { 138 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) { 139 if (cansc <= 1) { 140 if (delta == 1) { 141 goGun(1, 0); 142 if (scroll_b.position().top != 0) 143 return false; 144 } if (delta == -1) { 145 goGun(-1, 0); 146 if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH)) 147 return false; 148 } 149 } 150 }); 151 }; 152 153 }); 154 } 155 });
作者：leona
版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
