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

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <meta charset="utf-8" />

     <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-min-1.1.js" type="text/javascript"></script>

     <style type="text/css">

         .left,.Explain,.center,.welcome,.right,.usage{ height:300px;}

         .left,.Explain,.Explain_text{ width:200px;}

         .right,.usage,.usage_text{ width:700px;}

         .center,.welcome,.welcome_text{ width:300px;}

         .left,.right,.center{ padding:10px; padding-right:0; float:left; margin-right:10px; background-color: #cac9c9;}

         .Explain_text,.welcome_text,.usage_text { font-size: 14px; line-height: 30px; background-color: #cac9c9; color: #000000; }

     </style>

 </head>

 <body>

     <div class="left">

         <div class="Explain sss">

             <div class="Explain_text">

                 leonaScroll-1.1.js

                 <br />介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条

                 <br /><span style="color:red">(未超出可显示文本区域时，要求显示滚动条)</span>

             </div>

         </div>

     </div>

     <div class="center">

         <div class="welcome">

             <div class="welcome_text">

                 leonaScroll-1.1.js

                 <br />欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！

                 <br />作者：leona

                 <br />发布时间：2016-6-16

                 <br />博客：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>

                 <br /><span style="color:red">(未超出可显示文本区域时，默认不显示滚动条)</span>

             </div>

         </div>

     </div>

     <div class="right">

         <div class="usage">

             <div class="usage_text">

                 leonaScroll-1.1.js

                 <br />欢迎使用leonaScroll-1.1.js，如您在使用过程中发现更多问题，欢迎指正！

                 <br />更新：1.1版本

                 <br />1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂

                 <br />2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，显得更为自由

                 <br />3、增设了滚动条宽度、上下微调按钮高度，滚动文本区域的设置

                 <br />4、增设了文本内容未超出时是否显示滚动条可选设置选项，如不设置，默认为不显示

                 <br />5、增设了滚动文本宽度的可选设置选项，如不设置会自动为您适配到最佳宽度

                 <br />使用方法：

                 <br />1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件

                 <br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})调用插件

                 <br />3、属性说明：

                 <br />   speed         滚动速度，必须

                 <br />   scroll_text   滚动文本内容class，必须

                 <br />   sWidth        滚动条宽度，必须

                 <br />   updownH       上下微调按钮高度，必须

                 <br />   scrollbar     文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true

                 <br />   text_width    滚动文本宽度，可选

             </div>

         </div>

     </div>

     <script type="text/javascript">

         //滚动条调用方法

         $(".Explain").LeonaScroll({ speed: 20, scroll_text: ".Explain_text", sWidth: 14, updownH: 20, scrollbar: false});

         $(".welcome").LeonaScroll({ speed: 20, scroll_text: ".welcome_text", sWidth: 14, updownH: 20 });

         $(".usage").LeonaScroll({ speed: 20, scroll_text: ".usage_text", sWidth: 14, updownH: 20 });

     </script>

 </body>

 </html>

二、Jquery

 $.fn.extend({

     generateUUID: function () {

         //唯一ID数值生成

         var d = new Date().getTime();

         var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

             var r = (d + Math.random() * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' ? r : (r & 0x7 | 0x8)).toString(16);

         }); return uuid;

     },

     LeonaScroll: function (parameter) {

         var Sname = $(this).selector;

         return this.each(function () {

             //变量声明

             var elem = $(this), celem = $(this).find(parameter.scroll_text), index = $(this).generateUUID(), text_hidden = $(elem).height(), con_width = $(elem).width();

             //添加滚动条Html

             var scrollHTML = "";

             scrollHTML += "<div class='scroll_up leonaup" + index + "'></div>";

             scrollHTML += "<div class='scroll_cen leonacen" + index + "'><div class='scroll_button leonabutton" + index + "'></div></div>";

             scrollHTML += "<div class='scroll_down leonadown" + index + "'></div>";

             $(elem).append("<div class='scroll leonas" + index + "'> " + scrollHTML + "</div>");

             //添加滚动条CSS

             var scrollStyle = "";

             scrollStyle += "body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }";

             scrollStyle += Sname + "{ position: relative; overflow-y: hidden; clear:none ; }";

             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; }";

             scrollStyle += ".scroll { height:" + text_hidden + "px; float:right; }";

             scrollStyle += ".scroll,.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width:" + parameter.sWidth + "px; }";

             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;}";

             scrollStyle += ".scroll .scroll_up{background-position: 0px 6px; border-radius:5px 5px 0 0;  }";

             scrollStyle += ".scroll .scroll_down{ background-position:0px -49px; border-radius:0 0 5px 5px; }";

             scrollStyle += ".scroll .scroll_up:hover{background-position:0px -11px ; }";

             scrollStyle += ".scroll .scroll_down:hover{background-position:0px -31px ; }";

             scrollStyle += ".scroll .scroll_cen { height:" + (text_hidden - parameter.updownH * 2) + "px; background-color: #777676; position: relative; }";

             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; }";

             $("head").append("<style type='text/css'>" + scrollStyle + "</style>");

             //变量声明

             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;

             if (parameter.scrollbar == true || parameter.scrollbar === undefined) {

                 if (text_p >= 1) $(".leonas" + index + "").css("display", "none"); else { $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", bH + "px"); }

             } else return;

             //鼠标拖动div事件

             var needMove = false, mouseY = 0;

             scroll_b.mousedown(function (event) { needMove = true; var bH_Top = scroll_b.position().top; mouseY = event.pageY - bH_Top; });

             $(document).mouseup(function (event) { needMove = false; });

             $(document).mousemove(function (event) {

                 if (needMove) {

                     var sMouseY = event.pageY, bH_Top = sMouseY - mouseY, textY = bH_Top / bH_max * text_show;

                     if (bH_Top <= 0) {

                         scroll_b.css("top", 0);

                         $(celem).css("top", 0);

                         return;

                     }

                     if (bH_Top >= bH_max - bH) {

                         scroll_b.css("top", bH_max - bH);

                         $(celem).css("top", text_hidden - text_show);

                         return;

                     }

                     scroll_b.css("top", bH_Top); $(celem).css("top", -textY);

                 }

                 return;

             });

             //定义上下滚动规则

             function goGun(direction, timer) {

                 bH_Top = scroll_b.position().top;

                 var h = 0; h += parameter.speed;  //调节滑动速度

                 if (direction == 1) { //up

                     var Toping = bH_Top - h;

                     if (bH_Top <= 0 || Toping <= 0) {

                         scroll_b.css("top", 0); $(celem).css("top", 0);

                         if (timer == 2) clearInterval(goThread);   //need timer

                         return;

                     }

                     scroll_b.css("top", bH_Top - h);

                 };

                 if (direction == -1) { //down

                     var Downing = bH_Top + h;

                     if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) {

                         scroll_b.css("top", bH_max - bH);

                         $(celem).css("top", text_hidden - text_show);

                         if (timer == 2) clearInterval(goThread);   //need timer

                         return;

                     }

                     scroll_b.css("top", bH_Top + h);

                 }

                 var textY = bH_Top / bH_max * text_show;

                 $(celem).css("top", -textY);

             };

             //上下微调按钮事件

             function minTiao(minTB, d, t) {

                 var goThread = "";

                 minTB.mouseup(function () { clearInterval(goThread); });

                 minTB.mousedown(function () {

                     clearInterval(goThread);

                     goThread = setInterval(function () { goGun(d, t); }, 300);

                 });

                 minTB.click(function () { goGun(d); });

             };

             minTiao($(".leonaup" + index + ""), 1, 2);//up

             minTiao($(".leonadown" + index + ""), -1, 2);//down

             //滚轮事件

             if (text_p < 1) {

                 $(elem).bind("mousewheel", function (event, delta, deltaX, deltaY) {

                     if (delta == 1) {//up

                         goGun(1, 0);

                         if (scroll_b.position().top != 0)

                             return false;

                     } if (delta == -1) {//down

                         goGun(-1, 0);

                         if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))

                             return false;

                     }

                 });

             }

         });

     }

 });

下载地址链接：http://share.weiyun.com/2907af31e6427b83f7394014a62ca483（密码：EBBF）【leonaScroll-1.1】

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

javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
Jquery自定义滚动条插件
下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...
JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
JavaScript-JQ实现自定义滚动条插件1.0
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
自定义滚动条插件 mCustomScrollbar 使用介绍
引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...
jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
jquery自定义滚动条鼠标移入或滚轮时显示鼠标离开或悬停超时时隐藏
一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...
自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
自定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
自定义滚动条样式（jQuery插件、Webkit、IE）
-------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http: ...

随机推荐

CSS性能分析，如何优化CSS提高性能
不负十年后的自己,共勉! 前端性能优化一直是一个比较热门的话题,我们总是在尽我们最大的努力去,提高我们的页面性能,比如减少HTTP请求,利用工具对资源进行合并压缩,脚本置底,避免重复请求,css sp ...
Android原生json和fastjson的简单使用
android原生操作json数据主要是两个类 JSONObject 操作对象 JONSArray操作json数组对象转json //创建学生对象 Student student=new ...
深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
IOS开发基础知识--碎片22
1:设置有间距的表格行(UITableViewStyleGrouped) .设置section的数目,即是你有多少个cell - (NSInteger)numberOfSectionsInTableV ...
【产品 & 设计】入门 - 工具篇 - Sketch + Skala Preview
前言做产品和设计快 1 年了,积累了一点经验分享一下 —— 抛砖引玉,欢迎交流. 声明欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: ht ...
TNS-12502: TNS:listener received no CONNECT_DATA from client
检查我们的一台ORACLE数据库的监听日志发现有不少TNS-12502错误信息.如下所示 TNS-12502: TNS:listener received no CONNECT_DATA from c ...
MS SQL错误：SQL Server failed with error code 0xc0000000 to spawn a thread to process a new login or connection. Check the SQL Server error log and the Windows event logs for information about possible related problems
早晨宁波那边的IT人员打电话告知数据库无法访问了.其实我在早晨也发现Ignite监控下的宁波的数据库服务器出现了异常,但是当时正在检查查看其它服务器发过来的各类邮件,还没等到我去确认具体情 ...
tomcat 设置jvm内存
修改 tomcat安装目录\bin\catalina.bat在set JAVA_OPTS=%JAVA_OPTS% %LOGGING_CONFIG%这行下面加上 set JAVA_OPTS=%JAVA_ ...
oracle数据库rman备份计划及恢复
1.rman完全恢复的前提条件:历史的datafile,controlfile和spfile备份,加上完整的archivelog和完好的redolog. 2.rman备份脚本: a.RMAN 0级备份 ...
hbase伪分布式平台搭建（centos 6.3）
搭建完<hadoop伪分布式平台>后就开始搭建hbase伪分布式平台了.有了hadoop环境,搭建hbase就变得很容易了. 一.Hbase安装 1.从官网下载最新版本Hbase安装包1. ...

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

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

随机推荐

热门专题