jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)
更新時(shí)間：2016年09月17日 11:33:41 作者：Leona.d
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
leonaScroll-1.1最新版
leonaScroll-1.1.js
歡迎使用leonaScroll-1.1.js，如您在使用過程中發(fā)現(xiàn)更多問題，歡迎指正！
更新：1.1版本
1、修復(fù)了前面初始版本中的一些bug，比如不能自適應(yīng)用戶的文本內(nèi)容，css文件繁雜
2、用戶只需調(diào)用一個(gè)方法即可使用該插件，無需按照原來的class類名去添加和定義你的滾動(dòng)條文本域及外層元素，顯得更為自由
3、增設(shè)了滾動(dòng)條寬度、上下微調(diào)按鈕高度，滾動(dòng)文本區(qū)域的設(shè)置
4、增設(shè)了文本內(nèi)容未超出時(shí)是否顯示滾動(dòng)條可選設(shè)置選項(xiàng)，如不設(shè)置，默認(rèn)為不顯示
5、增設(shè)了滾動(dòng)文本寬度的可選設(shè)置選項(xiàng)，如不設(shè)置會(huì)自動(dòng)為您適配到最佳寬度
使用方法：
1、建立好您的Html，引用jquery框架與mousewheel插件，及我們的leonaScroll-1.1.js插件
2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})調(diào)用插件
3、屬性說明：
speed 滾動(dòng)速度，必須
scroll_text 滾動(dòng)文本內(nèi)容class，必須
sWidth 滾動(dòng)條寬度，必須
updownH 上下微調(diào)按鈕高度，必須
scrollbar 文本內(nèi)容未超出時(shí)是否顯示滾動(dòng)條，顯示為false，不顯示為true，可選，默認(rèn)為true
text_width 滾動(dòng)文本寬度，可選
leonaScroll-1.0僅供學(xué)習(xí)參考使用，該版本為本人學(xué)習(xí)時(shí)思路版，尚有不足，新版本修復(fù)了很多問題，但仍然存在著二次調(diào)用問題。不過已經(jīng)有了解決方案，只是本人比較賴，沒有修復(fù)，等待1.2版本修復(fù)吧！哈哈！
當(dāng)然如果有人使用后遇到bug或者不方便的地方，歡迎提出，以便本人繼續(xù)改進(jìn)。
學(xué)習(xí)之余寫的小插件，如有什么不足之處，還望見諒。
最后感謝在本插件開發(fā)過程中，幫助和解答過我疑問的朋友。尤其感謝Delevin先生的大力解惑！
廢話不說了，附j(luò)s代碼和下載地址
一、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框架，結(jié)合mousewheel插件實(shí)現(xiàn)的自定義滾動(dòng)條
<br /><span style="color:red">(未超出可顯示文本區(qū)域時(shí)，要求顯示滾動(dòng)條)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />歡迎使用leonaScroll-1.1.js，如您在使用過程中發(fā)現(xiàn)更多問題，歡迎指正！
<br />作者：leona
<br />發(fā)布時(shí)間：2016-6-16
<br />博客：<a >http://www.cnblogs.com/leona-d/</a>
<br /><span style="color:red">(未超出可顯示文本區(qū)域時(shí)，默認(rèn)不顯示滾動(dòng)條)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br />歡迎使用leonaScroll-1.1.js，如您在使用過程中發(fā)現(xiàn)更多問題，歡迎指正！
<br />更新：1.1版本
<br />1、修復(fù)了前面初始版本中的一些bug，比如不能自適應(yīng)用戶的文本內(nèi)容，css文件繁雜
<br />2、用戶只需調(diào)用一個(gè)方法即可使用該插件，無需按照原來的class類名去添加和定義你的滾動(dòng)條文本域及外層元素，顯得更為自由
<br />3、增設(shè)了滾動(dòng)條寬度、上下微調(diào)按鈕高度，滾動(dòng)文本區(qū)域的設(shè)置
<br />4、增設(shè)了文本內(nèi)容未超出時(shí)是否顯示滾動(dòng)條可選設(shè)置選項(xiàng)，如不設(shè)置，默認(rèn)為不顯示
<br />5、增設(shè)了滾動(dòng)文本寬度的可選設(shè)置選項(xiàng)，如不設(shè)置會(huì)自動(dòng)為您適配到最佳寬度
<br />使用方法：
<br />1、建立好您的Html，引用jquery框架與mousewheel插件，及我們的leonaScroll-1.1.js插件
<br />2、使用$("")..LeonaScroll({speed,scroll_text,sWidth,updownH})調(diào)用插件
<br />3、屬性說明：
<br /> speed 滾動(dòng)速度，必須
<br /> scroll_text 滾動(dòng)文本內(nèi)容class，必須
<br /> sWidth 滾動(dòng)條寬度，必須
<br /> updownH 上下微調(diào)按鈕高度，必須
<br /> scrollbar 文本內(nèi)容未超出時(shí)是否顯示滾動(dòng)條，顯示為false，不顯示為true，可選，默認(rèn)為true
<br /> text_width 滾動(dòng)文本寬度，可選
</div>
</div>
</div>
<script type="text/javascript">
//滾動(dòng)條調(diào)用方法
$(".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數(shù)值生成
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();
//添加滾動(dòng)條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>");
//添加滾動(dòng)條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; }\r\n";
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;
//鼠標(biāo)拖動(dòng)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;
});
//定義上下滾動(dòng)規(guī)則
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //調(diào)節(jié)滑動(dòng)速度
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);
};
//上下微調(diào)按鈕事件
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;
}
});
}
});
}
});
以上所述是小編給大家介紹的jQuery leonaScroll 1.1 自定義滾動(dòng)條插件，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
jQuery+ajax簡單實(shí)現(xiàn)文件上傳的方法
這篇文章主要介紹了jQuery+ajax簡單實(shí)現(xiàn)文件上傳的方法,結(jié)合實(shí)例形式簡單分析了jQuery基于ajax的post方法進(jìn)行文件傳輸及asp.net后臺(tái)處理技巧,需要的朋友可以參考下2016-06-06
舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷
使用jQuery可以更加容易地遍歷DOM的父級(jí)、子級(jí)和同級(jí)元素,這里我們就來舉例講解jQuery對(duì)DOM元素的向上遍歷、向下遍歷和水平遍歷:2016-07-07
基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的美觀星級(jí)評(píng)論打分組件代碼,涉及jQuery回調(diào)函數(shù)及頁面元素屬性動(dòng)態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
jquery 可以用text()方法來取得字符串，再用length 判斷長度，然后用substring()方法格式化截?cái)?/div> 2011-09-09
tab切換，是一個(gè)很常見的效果，今天在項(xiàng)目中遇到這樣一個(gè)問題。就是切換后，頁面刷新，又重新定位到第一個(gè)上了，很是郁悶2012-05-05
這篇文章主要為大家詳細(xì)介紹了jQuery表單設(shè)置值的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果
使用jquery實(shí)現(xiàn)select添加實(shí)現(xiàn)后臺(tái)權(quán)限添加的效果，需要的朋友可以參考下。2011-05-05
$.fn是指jquery的命名空間，加上fn上的方法及屬性，會(huì)對(duì)jquery實(shí)例每一個(gè)有效，下面簡單為大家介紹下jquery $.fn $.fx到底是怎么一回事2013-11-11
jQueryeasyui 中如何使用datetimebox 取兩個(gè)日期間相隔的天數(shù)
這篇文章主要介紹了jQueryeasyui 中使用datetimebox 取兩個(gè)日期間相隔的天數(shù)，需要的朋友參考下吧2017-06-06
jQuery web 組件 后臺(tái)日歷價(jià)格、庫存設(shè)置的代碼
這篇文章主要介紹了jQuery web 組件 后臺(tái)日歷價(jià)格、庫存設(shè)置的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-10-10最新評(píng)論