leonaScroll-1.2.js

下载链接地址：http://share.weiyun.com/bb531dd6b1916c0023c176897182dc15 （密码：iZck）【内含压缩版】

欢迎使用leonaScroll-1.2.js，如您在使用过程中发现更多问题，欢迎指正！ 
介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义竖向滚动条。
插件大小：leonaScroll-1.2 .js         9.14KB
              leonaScroll-min-1.2.js    4.2KB
更新：1.2版本 
1、从js里将滚动条的背景、图片、颜色等样式提取出来，以方便用户自定义喜欢的样式 
2、修复了滚动条同一页面二次加载时的错误 
3、将其所有属性值变更为可选，简化了使用方法

使用方法： 
一、建立好您的Html，引用jquery框架、mousewheel插件、leonaScroll-1.2.js插件 
 <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>

二、使用$("").LeonaScroll()调用插件

三、属性使用说明： 
  多个属性之间用“ , ”分隔 
  属性值需要“{ }”括起来 
  属性默认有值，全部为可选，可根据需求设置合适的属性，以符合您的页面需求

(超出可显示文本区域时，自动显示滚动条)

 

leonaScroll-1.2.js——属性

scroll_text  滚动文本类名
  1. 类型：可选
  2. 默认：该方法选中元素的第一个子元素，并默认给其添加一个名为“scroll_text”class类名
  3. 解释：滚动文本类名，规则和css一样，如.class或#id或li
  4. 用法：$("Element").LeonaScroll({scroll_text :'.class'})
speed  滚动速度
  1. 类型：可选
  2. 默认：20px
  3. 解释：滚动速度，数字越大速度越快
  4. 用法：$("Element").LeonaScroll({speed:50})
sWidth 滚动条宽度
  1. 类型：可选
  2. 默认：14px
  3. 解释：滚动条整体宽度
  4. 用法：$("Element").LeonaScroll({sWidth :14})
updownH 微调按钮高度
  1. 类型：必须
  2. 默认：无
  3. 解释：上下微调按钮高度
  4. 用法：$("Element").LeonaScroll({updownH :20})
text_width 滚动文本内容宽度
  1. 类型：可选
  2. 默认：调用方法选中元素宽-滚动条宽
  3. 解释：需要滚动区域的文本内容的宽度
  4. 用法：$("Element").LeonaScroll({text_width :false})
scrollbar 未超出时滚动条显示否
  1. 类型：可选
  2. 默认：true
  3. 解释：文本内容未超出时是否显示滚动条，显示为false，不显示为true
  4. 用法：$("Element").LeonaScroll({scrollbar :20})
addHeight 动态输出修复高度
  1. 类型：可选
  2. 默认：0px
  3. 解释：文本内容实际高度增加（加高），此属性是为了解决部分因动态数据加载慢于滚动条插件加载时，导致插件无法获取到准确的可显示文本高度，从而造成显示文本内容丢失。该属性可以硬性给可显示文本增加高度。
  4. 用法：$("Element").LeonaScroll({addHeight :40})
autoStyle 默认美化样式
  1. 类型：可选
  2. 默认：true
  3. 解释：是否需要默认的美化样式，需要为true，不需要为false，如不需要则需要自定义美化样式，因此，该属性要和样式属性搭配使用，不能单独使用，否则会出现乱码，小白慎用，大神随意
  4. 用法：$("Element").LeonaScroll({autoStyle :false})
美化样式属性
  • 类型：autoStyle属性值为true是需要，为false则是必须
  • 默认：黑色样式,如图：
  • 属性说明：
    1. scroll_UDCss:滚动条的上下微调按钮样式
    2. scroll_upCss:滚动条的上微调按钮样式
    3. scroll_upCssHover:滚动条的上微调按钮鼠标悬停样式
    4. scroll_downCss:滚动条的下微调按钮样式
    5. scroll_downCssHover:滚动条的下微调按钮鼠标悬停样式
    6. scroll_cenCss:滚动条中间轨道样式
    7. scroll_cenButtonCss:滚动条中间滑动按钮样式
  • 图示说明：

附代码：

 $.fn.extend({

     LeonaScroll: function (parameter) {

         parameter = parameter === undefined ? {} : parameter;

         var Sname = $(this).selector;

         var allar = this;

         return this.each(function () {

             var havedefsrolltext = $(this).find(parameter.scroll_text).length;

             if (!havedefsrolltext) {

                 parameter.scroll_text = ".scroll_text";

                 $($(this).children().get(0)).addClass("scroll_text");

             }

             var elem = $(this),

                 celem = $(this).find(parameter.scroll_text),

                 index = Sname.replace(".", "").toUpperCase() + $(Sname).index($(this)),

                 text_hidden = $(elem).height(),

                 con_width = $(elem).width();

             $(elem).unbind();

             //添加滚动条Html

             var cansc = $(".leonaup" + index + "").length;

             if (!cansc) {

                 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 sW = parameter.sWidth === undefined ? 14 : parameter.sWidth;

             var scrollStyle = Sname + "{ position: relative; overflow-y: hidden; clear:none;-moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; }\r\n";

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

             scrollStyle += Sname + " .scroll { height:" + text_hidden + "px; float:right; }\r\n";

             scrollStyle += Sname + " .scroll," + Sname + " .scroll .scroll_cen, " + Sname + " .scroll .scroll_up, " + Sname + " .scroll .scroll_down { width:" + sW + "px; }\r\n";

             scrollStyle += Sname + " .scroll .scroll_up," + Sname + " .scroll .scroll_down {height:" + (parameter.updownH === undefined ? 20 : parameter.updownH) + "px; cursor: pointer;}\r\n";

             scrollStyle += Sname + " .scroll .scroll_cen { height:" + (text_hidden - (parameter.updownH === undefined ? 20 : parameter.updownH) * 2) + "px; position: relative; }\r\n";

             scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { width:" + (sW - 2) + "px;  margin: 0px 1px;  position: absolute; cursor: pointer; }\r\n";

             //滚动条美化CSS--默认

             var needAutoStyle = parameter.autoStyle === undefined ? true : parameter.autoStyle;

             if (needAutoStyle == true) {

                 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down { background-image: url(img/bw.png); background-color: #161515; background-repeat: no-repeat; }\r\n";

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

                 scrollStyle += Sname + " .scroll .scroll_up:hover { background-position: center -11px;} \r\n";

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

                 scrollStyle += Sname + " .scroll .scroll_down:hover { background-position: center -31px;}\r\n ";

                 scrollStyle += Sname + " .scroll .scroll_cen {  background-color: #777676;}\r\n ";

                 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button {  background: url(img/tiao.jpg) repeat-y 0 0; border-radius: 5px;}\r\n ";

             } else {

                 scrollStyle += Sname + " .scroll .scroll_up, .scroll .scroll_down {" + parameter.scroll_UDCss + "}\r\n";

                 scrollStyle += Sname + " .scroll .scroll_up {" + parameter.scroll_upCss + "}\r\n ";

                 scrollStyle += Sname + " .scroll .scroll_up:hover {" + parameter.scroll_upCssHover + "}\r\n";

                 scrollStyle += Sname + " .scroll .scroll_down { " + parameter.scroll_downCss + "}\r\n";

                 scrollStyle += Sname + " .scroll .scroll_down:hover {" + parameter.scroll_downCssHover + "}\r\n ";

                 scrollStyle += Sname + " .scroll .scroll_cen {" + parameter.scroll_cenCss + "}\r\n ";

                 scrollStyle += Sname + " .scroll .scroll_cen .scroll_button { " + parameter.scroll_cenButtonCss + "}\r\n ";

             }

             if ($("#leonascrollStyle").length) {

                 $("#leonascrollStyle").html($("#leonascrollStyle").html() + scrollStyle);

             } else {

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

             }

             var text_show = parameter.addHeight === undefined ? $(celem).height() : $(celem).height() + parameter.addHeight,

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

             }

             //鼠标拖动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 === undefined ? 20 : parameter.speed);

                 if (direction == 1) {

                     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);

                         return;

                     }

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

                 }

                 if (direction == -1) {

                     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);

                         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);

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

             //滚轮事件

             if (text_p < 1) {

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

                     if (cansc <= 1) {

                         if (delta == 1) {

                             goGun(1, 0);

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

                                 return false;

                         } if (delta == -1) {

                             goGun(-1, 0);

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

                                 return false;

                         }

                     }

                 });

             };

         });

     }

 });

作者：leona

原文链接：http://www.cnblogs.com/leona-d/p/5950280.html

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接
 
 

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

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

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  2. Jquery自定义滚动条插件

    下载地址:http://files.cnblogs.com/files/LoveOrHate/jquery.nicescroll.min.js <script src="jquery. ...

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

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  4. JavaScript-JQ实现自定义滚动条插件1.0

    此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...

  5. 自定义滚动条插件 mCustomScrollbar 使用介绍

    引用有心的学士笔记 http://www.wufangbo.com/mcustomscrollbar/ http://www.jianshu.com/p/550466260856 官网地址 http: ...

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

    如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...

  7. jquery自定义滚动条 鼠标移入或滚轮时显示 鼠标离开或悬停超时时隐藏

    一.需求: 我需要做一个多媒体播放页面,左侧为播放列表,右侧为播放器.为了避免系统滚动条把列表和播放器隔断开,左侧列表的滚动条需要自定义,并且滚动停止和鼠标离开时要隐藏掉. 二.他山之石: 案例来自h ...

  8. 自定义滚动条 - mCustomScrollbar

    项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...

  9. 自定义滚动条mCustomScrollbar

    mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...

  10. 自定义滚动条样式（jQuery插件、Webkit、IE）

    -------------jQuery滚动条插件------------- http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html http: ...

随机推荐

  1. 使用mvc时，在视图view中使用强类型视图，在web.config文件中添加命名空间namespace的引用不起作用，解决方法

    这是view中的model代码: @model t_user_info 这是web.config配置文件只的代码: <namespaces> <add namespace=" ...

  2. Atitit. 查找linux 项目源码位置

    Atitit. 查找linux 项目源码位置 1. netstat   -anp |grep 801 1.1. 1.3 启动关闭nginx3 1.2. 找到nginx配置文件4 1.3. ./etc/ ...

  3. NetSuite Chinese Finance Reports

    NetSuite has a strong report customization application. The standard finance reports has a different ...

  4. Android Home键监听

    Android Back Home键监听 Back键的监听 对于Back键的监听比较容易,可以在多个系统回调处拦截,比如在activity的下列方法中都可以收到Back键按下的事件: @Overrid ...

  5. Android屏幕适配

    安卓分辨率的相关知识 http://leoray.leanote.com/post/android-resolution Android内存占用公式 系统内存 = 像素宽 * 像素高 * 像素所占用的 ...

  6. KEIL中启动文件详解（汇编语言）

    原文在此:http://www.cnblogs.com/mddblog/p/4920063.html 概述 在嵌入式系统中,启动文件是整个系统非常关键的部分,它会进行一些底层的初始化,构建程序运行必要 ...

  7. Picasso设置圆角

    package liu.roundimagedemo.view; import android.graphics.Bitmap; import android.graphics.BitmapShade ...

  8. LinearLayout布局问题

    LinearLayout是平时开发中很常见的线性布局方式,分为水平和竖直2种,笔者在实际使用中发现了如下问题,希望能帮到别人. 横着的LinearLayout,凡是设置x坐标的属性都不起作用,比如la ...

  9. TCP流量控制与拥塞控制

    为了更好地对传输层进行拥塞控制,因特网建议标准定义了以下四种算法:慢启动.拥塞避免.快重传和快恢复. 1 接收窗口rwnd与拥塞窗口cwnd 发送方在确定发送报文段的速率时,既要根据接收方的接收能力, ...

  10. Redis时延问题分析及应对

    Redis时延问题分析及应对 Redis的事件循环在一个线程中处理,作为一个单线程程序,重要的是要保证事件处理的时延短,这样,事件循环中的后续任务才不会阻塞: 当redis的数据量达到一定级别后(比如 ...