Jquery-leonaScroll-1.2-custom scroll bar plug-in, jquery custom scroll bar

Jquery-leonaScroll-1.2-custom scroll bar plug-in, jquery custom scroll bar

 

LeonaScroll-1.2.js
Download link: http://share.weiyun.com/bb531dd6b1916c0023c176897182dc15 (password: iZck) [contains compressed version]
Welcome to use leonaScroll-1.2.js, if you find more problems during use, please correct me!
Introduction: it is a custom vertical scroll bar based on the jquery framework combined with the mousewheel plug-in. Plug-in size: leonaScroll-1.2. js 9.14KB leonaScroll-min-1.2.js 4.2KB
Update: version 1.2
1. Extract the background, image, color, and other styles of the scroll bar from js to help you customize your favorite styles.
2. Fixed the secondary loading error of the same page of the scroll bar.
3. Change all attribute values to optional, which simplifies the usage.

Usage:
1. Build your Html and reference jquery framework, mousewheel plug-in, leonaScroll-1.2.js plug-in
<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>

Ii. use $ (""). LeonaScroll () to call the plug-in

Iii. Attribute usage instructions:
Multiple Attributes are separated by commas (,).
Attribute values must be included in {}
The default attribute has a value, all of which are optional. You can set an appropriate attribute as needed to meet your page requirements.

(When the text area is exceeded, the scroll bar is automatically displayed)

LeonaScroll-1.2.js -- properties scroll_text scroll text class name speed scroll speed sWidth scroll bar width updownH fine-tune button height text_width scroll text content width scrollbar not exceeded when the scroll bar displays no addHeight dynamic output repair height autoStyle default beautify style beautification style attributes

• Type: required if the autoStyle property value is true or false.
• Default Value: black,
  
• Attribute description:
• Illustration:
  

Code:

1 $. fn. extend ({2 LeonaScroll: function (parameter) {3 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 // Add the scroll bar Html 20 var cansc = $ (". leonau P "+ 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 // the CSS of the scroll bar -- 30 var sW = parameter. sWidth === undefined? 14: parameter. sWidth; 31 var scrollStyle = Sname + "{position: relative; overflow-y: hidden; clear: none;-moz-user-select: none; /* Firefox */-webkit-user-select: none;/* webkit browser */-ms-user-select: none; /* IE10 */-khtml-user-select: none;/* early browser */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 scrollSty Le + = 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 // the CSS of the scroll bar. The default value is 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 0;} \ r \ n "; 44 scrollStyle + = Sname + ". scroll. scroll_up: hov Er {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_c En. 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 s CrollStyle + = 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 = 'leonascrollsty'>" + 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 // drag the div event 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 rows (celem).css ("top", 0); 83 return; 84} 85 if (bH_Top> = bH_max-bH) {86 scroll_ B .css ("top", bH_max-bH ); 87 items (celem).css ("top", text_hidden-text_show); 88 return; 89} 90 scroll_ B .css ("top", bH_Top); items (celem).css ("top",-textY ); 91} 92 return; 9 3}); 94 95 // define the upper and lower rolling rule 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 rows (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 (" P ", bH_max-bH); 113 rows (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 rows (celem).css ("top",-textY ); 121} 122 123 // event 124 function minTiao (minTB, d, t) {125 var goThread = ""; 126 minTB. mouseup (function () {clearInterval (goThread) ;}); 127 minTB. mousedo Wn (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 // scroll wheel event 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 });

Author: leona

Link: http://www.cnblogs.com/leona-d/p/5950280.html

Copyright Disclaimer: The copyright of this article is shared by the author and the blog. You are welcome to repost it. However, you must keep this statement without the author's consent and provide the original article link clearly on the article page.