jquery-leonaScroll-1.2-自定義滾動條插件

 

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 

版權聲明：本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接