leonaScroll-1.1最新版-豎向 leonaScroll-1.1.js歡迎使用leonaScroll-1.1.js，此滾動條僅支持豎向滾動，如您在使用過程中發現更多問題，歡迎指正！ 更新：1.1版本1、修複了前面初始版本中的一些bug，比如不能自適應用戶的文本內容，css文件繁雜2、用戶只 ...
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
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <meta charset="utf-8" /> 7 <script src="js/jquery-1.10.2.js" type="text/javascript"></script> 8 <script src="js/mousewheel.js" type="text/javascript"></script> 9 <script src="js/leonaScroll-min-1.1.js" type="text/javascript"></script> 10 <style type="text/css"> 11 .left,.Explain,.center,.welcome,.right,.usage{ height:300px;} 12 .left,.Explain,.Explain_text{ width:200px;} 13 .right,.usage,.usage_text{ width:700px;} 14 .center,.welcome,.welcome_text{ width:300px;} 15 .left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;} 16 .Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; } 17 </style> 18 </head> 19 20 <body> 21 <div class="left"> 22 <div class="Explain sss"> 23 <div class="Explain_text"> 24 leonaScroll-1.1.js 25 <br />介紹：是一款基於jquery框架，結合mousewheel插件實現的自定義滾動條 26 <br /><span style="color:red">(未超出可顯示文本區域時，要求顯示滾動條)</span> 27 </div> 28 </div> 29 </div> 30 31 <div class="center"> 32 <div class="welcome"> 33 <div class="welcome_text"> 34 leonaScroll-1.1.js 35 <br />歡迎使用leonaScroll-1.1.js，如您在使用過程中發現更多問題，歡迎指正！ 36 <br />作者：leona 37 <br />發佈時間：2016-6-16 38 <br />博客：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a> 39 <br /><span style="color:red">(未超出可顯示文本區域時，預設不顯示滾動條)</span> 40 </div> 41 </div> 42 </div> 43 44 <div class="right"> 45 <div class="usage"> 46 <div class="usage_text"> 47 leonaScroll-1.1.js 48 <br />歡迎使用leonaScroll-1.1.js，如您在使用過程中發現更多問題，歡迎指正！ 49 <br />更新：1.1版本 50 <br />1、修複了前面初始版本中的一些bug，比如不能自適應用戶的文本內容，css文件繁雜 51 <br />2、用戶只需調用一個方法即可使用該插件，無需按照原來的class類名去添加和定義你的滾動條文本域及外層元素，顯得更為自由 52 <br />3、增設了滾動條寬度、上下微調按鈕高度，滾動文本區域的設置 53 <br />4、增設了文本內容未超出時是否顯示滾動條可選設置選項，如不設置，預設為不顯示 54 <br />5、增設了滾動文本寬度的可選設置選項，如不設置會自動為您適配到最佳寬度 55 <br />使用方法： 56 <br />1、建立好您的Html，引用jquery框架與mousewheel插件，及我們的leonaScroll-1.1.js插件 57 <br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})調用插件 58 <br />3、屬性說明： 59 <br /> speed 滾動速度，必須 60 <br /> scroll_text 滾動文本內容class，必須 61 <br /> sWidth 滾動條寬度，必須 62 <br /> updownH 上下微調按鈕高度，必須 63 <br /> scrollbar 文本內容未超出時是否顯示滾動條，顯示為false，不顯示為true，可選，預設為true 64 <br /> text_width 滾動文本寬度，可選 65 </div> 66 </div> 67 </div> 68 <script type="text/javascript"> 69 //滾動條調用方法 70 $(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false}); 71 $(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 }); 72 $(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 }); 73 </script> 74 75 </body> 76 </html>
二、Jquery
1 $.fn.extend({ 2 generateUUID: function () { 3 //唯一ID數值生成 4 var d = new Date().getTime(); 5 var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) { 6 var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16); 7 }); return uuid; 8 }, 9 10 LeonaScroll: function (parameter) { 11 var Sname = $(this).selector; 12 return this.each(function () { 13 //變數聲明 14 var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width(); 15 16 //添加滾動條Html 17 var scrollHTML = ""; 18 scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>"; 19 scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>"; 20 scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>"; 21 $(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>"); 22 23 //添加滾動條CSS 24 var scrollStyle = ""; 25 scrollStyle += "body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit瀏覽器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期瀏覽器*/ user-select: none; }"; 26 scrollStyle += Sname + "{ position: relative; overflow-y: hidden; clear:none ; }"; 27 scrollStyle += parameter.scroll_text + "{width:" + (parameter.text_width === undefined ? (con_width - parameter.sWidth) : parameter.text_width) + "px; word-break: break-word; position: absolute; left: 0; top: 0; clear:both; }"; 28 scrollStyle += ".scroll { height:" + text_hidden + "px; float:right; }"; 29 scrollStyle += ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:" + parameter.sWidth + "px; }"; 30 scrollStyle += ".scroll .scroll_up, .scroll .scroll_down {height:" + parameter.updownH + "px; line-height: " + parameter.updownH + "px; color: #ffffff; font-size: 12px; font-weight: bold; background-image:url(img/bw.png); background-color:#161515; background-repeat:no-repeat; cursor: pointer;}"; 31 scrollStyle += ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0; }"; 32 scrollStyle += ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }"; 33 scrollStyle += ".scroll .scroll_up:hover{background-position:0px -11px ; }"; 34 scrollStyle += ".scroll .scroll_down:hover{background-position:0px -31px ; }"; 35 scrollStyle += ".scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }"; 36 scrollStyle += ".scroll .scroll_cen .scroll_button { width:" + (parameter.sWidth - 2) + "px; margin: 0px 1px; background:url(img/tiao.jpg) repeat-y 0 0; border-radius: 5px; position: absolute; cursor: pointer; }"; 37 $("head").append("<style type='text/css'>" + scrollStyle + "</style>"); 38 39 //變數聲明 40 var text_show = $(celem).height(), scroll_b = $(".leonabutton" + index + ""), text_p = text_hidden / text_show, bH_max = $(".leonas" + index + " .leonacen" + index + "").height(), bH = text_p * bH_max; 41 if (parameter.scrollbar == true || parameter.scrollbar === undefined) { 42 if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); } 43 } else return; 44 45 46 //滑鼠拖動div事件 47 var needMove = false, mouseY = 0; 48 scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; }); 49 $(document).mouseup(function (event) { needMove = false; }); 50 $(document).mousemove(function (event) { 51 if (needMove) { 52 var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show; 53 if (bH_Top <= 0) { 54 scroll_b.css("top", 0); 55 $(celem).css("top", 0); 56 return; 57 } 58 if (bH_Top >= bH_max - bH) { 59 scroll_b.css("top", bH_max - bH); 60 $(celem).css("top", text_hidden - text_show); 61 return; 62 } 63 scroll_b.css("top", bH_Top); $(celem).css("top", -textY); 64 } 65 return; 66 }); 67 68 //定義上下滾動規則 69 function goGun(direction, timer) { 70 bH_Top = scroll_b.position().top; 71 var h = 0; h += parameter.speed; //調節滑動速度 72 if (direction == 1) { //up 73 var Toping = bH_Top - h; 74 if (bH_Top <= 0 || Toping <= 0) { 75 scroll_b.css("top", 0); $(celem).css("top", 0); 76 if (timer == 2) clearInterval(goThread); //need timer 77 return; 78 } 79 scroll_b.css("top", bH_Top - h); 80 }; 81 if (direction == -1) { //down 82 var Downing = bH_Top + h; 83 if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { 84 scroll_b.css("top", bH_max - bH); 85 $(celem).css("top", text_hidden - text_show); 86 if (timer == 2) clearInterval(goThread); //need timer 87 return; 88 } 89 scroll_b.css("top", bH_Top + h); 90 } 91 var textY = bH_Top / bH_max * text_show; 92 $(celem).css("top", -textY); 93 }; 94 95 //上下微調按鈕事件 96 function minTiao(minTB, d, t) { 97 var goThread = ""; 98 minTB.mouseup(function () { clearInterval(goThread); }); 99 minTB.mousedown(function () { 100 clearInterval(goThread); 101 goThread = setInterval(function () { goGun(d, t); }, 300); 102 }); 103 minTB.click(function () { goGun(d); }); 104 }; 105 minTiao($(".leonaup" + index + ""), 1, 2);//up 106 minTiao($(".leonadown" + index + ""), -1, 2);//down 107 108 //滾輪事件 109 if (text_p < 1) { 110 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) { 111 if (delta == 1) {//up 112 goGun(1, 0); 113 if (scroll_b.position().top != 0) 114 return false; 115 } if (delta == -1) {//down 116 goGun(-1, 0); 117 if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH)) 118 return false; 119 } 120 }); 121 } 122 123 }); 124 } 125 });
下載地址鏈接：http://share.weiyun.com/2907af31e6427b83f7394014a62ca483 （密碼：EBBF）【leonaScroll-1.1】
