jquery-leonaScroll-1.1-自定义滚动条插件

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; }\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("<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) 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 });

下载地址链接:http://share.weiyun.com/9b88c48f700af8e944249de94fef1760(密码:2mt)【leonaScroll-1.1】

时间: 2024-11-06 07:36:45

jquery-leonaScroll-1.1-自定义滚动条插件的相关文章

javascript自定义滚动条插件.

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

javascript自定义滚动条插件,几行代码的事儿

在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title

jQuery自定义滚动条插件mCustomScrollbar

写项目的时候遇到了这种情况 我用了两个iframe,左边是一个菜单栏,可以展开也可以收回去的.就说这个滚动条太丑了,是浏览器默认的,所以学着用mCustomScrollbar来解决一下这个问题. 1:资源下载 https://github.com/malihu/malihu-custom-scrollbar-plugin,我是从这里下载的. 2:引入 注意顺序. <link rel="stylesheet" type="text/css" href="

实战-jQuery实现自定义滚动条插件

效果图: 这篇文章主要讲解js交互,就不用篇幅去告诉大家怎么写html css了,让文章言简意赅. 大体思路: 如何实现滚动滑块,让滑块与内容一起联动呢?请看下图: 首先来看, 空心鼠标位置与实心鼠标位置的距离 是不是等于滑块移动的距离X0 呢? 答:等于 滑块移动的最大距离X0是多少呢? 答:滚动条的高度X - 滑块的高度 内容能滚动最大高度Y0是多少呢? 答:内容总高度Y - 内容可视区的高度 通过比较:可以得出滚动比率: 那么代码应该怎么写呢: 第一步: 获取鼠标移动距离 = 滑块移动距离

Jquery自定义滚动条插件

下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery.nicescroll.js"></script> $(document).ready( function() { $("html").niceScroll(); } ); var nice = false; $(document).ready( function

JavaScript学习笔记- 自定义滚动条插件

此滚动条仅支持竖向(Y轴) 一.Css 1 /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ 2 body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } 3 4 /*滚动文本及滚动条大框*/ 5 .scro

jQuery自定义滚动条样式插件mCustomScrollbar

如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScrollPane,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大,效果在几年前非常不错,但是放在现在就不好说了.所以我选择了后者:mCustomScrollbar.下图是两者官方示例的简单对比: 本文就是介绍如何使用 mCustomScrollbar 这个插件,大部分的内容是翻译自 mCus

自定义滚动条mCustomScrollbar

mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,并且在滚动的过程中,还可以缓冲滚动使得滚动更加的平滑,还可以自动调整滚动条的位置和定义滚动到的位置等. 1.如何使用 mCustomScrollbar(必须要加载如下的4个文件) jquery.mCustomScro

基于jQuery的滚动条插件-jquery.jscrollbar

jquery.jscrollbar 是一个基于jQuery的滚动条插件,支持水平滚动条和垂直滚动条,支持鼠标键盘事件 主要功能 支持水平滚动条 支持垂直滚动条 自动判断水平滚动条和垂直滚动条是否显示 支持外部调用来滚动内容 支持滚动条部分样式自定义 支持键盘方向键控制 支持鼠标滚动(需要mousewheel插件) 支持滚动条显示位置设置(外部|悬浮) 支持手动更新界面 依赖的库 jQuery (http://jquery.com/) jquery.jqdrag (https://github.c

jquery滚动条插件nanoscroller的应用

默认的滚动条的样式,各个版本的兼容性不是很好, 推荐一款jQuery 插件nanoscroller ,可以自定义滚动条的样式. 应用: 1.引入样式 nanoscroller.css <link rel="stylesheet" href="nanoscroller.css"> 在页面中自定义滚动条的样式 自定义的样式如下图所示: 2.两个js文件,一个jQuery库,一个jquery.nanoscroller.js <script src=&qu