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 += "";
- 19 scrollHTML += "";
- 20 scrollHTML += "";
- 21 $(elem).append(" " + scrollHTML + "");
- 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; }\r\n";
- 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("");
- 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) scroll_b.css("top", 0);
- $(celem).css("top", 0);
- return;
- 54
- if (bH_Top >= bH_max - bH) scroll_b.css("top", bH_max - bH);
- $(celem).css("top", text_hidden - text_show);
- return;
- 55 scroll_b.css("top", bH_Top);
- $(celem).css("top", -textY);
- 56
- }
- return;
- 57
- });
- 58 59 //定义上下滚动规则
- 60
- function goGun(direction, timer) {
- 61 bH_Top = scroll_b.position().top;
- 62
- var h = 0;
- h += parameter.speed; //调节滑动速度
- 63
- if (direction == 1) { //up
- 64
- var Toping = bH_Top - h;
- 65
- if (bH_Top <= 0 || Toping <= 0) {
- 66 scroll_b.css("top", 0);
- $(celem).css("top", 0);
- 67
- if (timer == 2) clearInterval(goThread); //need timer
- 68
- return;
- 69
- }
- 70 scroll_b.css("top", bH_Top - h);
- 71
- };
- 72
- if (direction == -1) { //down
- 73
- var Downing = bH_Top + h;
- 74
- if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {
- 75 scroll_b.css("top", bH_max - bH);
- 76 $(celem).css("top", text_hidden - text_show);
- 77
- if (timer == 2) clearInterval(goThread); //need timer
- 78
- return;
- 79
- }
- 80 scroll_b.css("top", bH_Top + h);
- 81
- }
- 82
- var textY = bH_Top / bH_max * text_show;
- 83 $(celem).css("top", -textY);
- 84
- };
- 85 86 //上下微调按钮事件
- 87
- function minTiao(minTB, d, t) {
- 88
- var goThread = "";
- 89 minTB.mouseup(function() {
- clearInterval(goThread);
- });
- 90 minTB.mousedown(function() {
- 91 clearInterval(goThread);
- 92 goThread = setInterval(function() {
- goGun(d, t);
- },
- 300);
- 93
- });
- 94 minTB.click(function() {
- goGun(d);
- });
- 95
- };
- 96 minTiao($(".leonaup" + index + ""), 1, 2); //up
- 97 minTiao($(".leonadown" + index + ""), -1, 2); //down
- 98 99 //滚轮事件
- 100
- if (text_p < 1) {
- 101 $(elem).bind("mousewheel",
- function(event, delta, deltaX, deltaY) {
- 102
- if (delta == 1) { //up
- 103 goGun(1, 0);
- 104
- if (scroll_b.position().top != 0) 105
- return false;
- 106
- }
- if (delta == -1) { //down
- 107 goGun( - 1, 0);
- 108
- if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH)) 109
- return false;
- 110
- }
- 111
- });
- 112
- }
- 113 114
- });
- 115
- }
- 116
- });
下载地址链接:(密码:2mt)【leonaScroll-1.1】
来源: http://www.cnblogs.com/leona-d/p/5878182.html