English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js, wenn Sie während der Verwendung weitere Probleme entdecken, freuen wir uns auf Ihre Korrekturen!
更新：1.1Version
1、Bekannte Fehler im frühen Version wurden behoben, wie z.B. die Anpassung des Textinhalts des Benutzers nicht möglich, das css-Datei ist komplex
2、Der Benutzer muss nur eine Methode aufrufen, um das Plugin zu verwenden, es ist nicht erforderlich, wie zuvor die Class des Rolltextbereichs und des äußeren Elements hinzuzufügen und zu definieren, was mehr Freiheit bietet
3、Hinzugefügt wurden die Einstellungen für die Breite der Rollleiste, die Höhe der Aufwärts/Abwärts-Justierungstaste und den Bereich des rollbaren Textes
4、Hinzugefügt wurde die optionale Einstellung, ob die Rollleiste angezeigt wird, wenn der Textinhalt nicht übertrifft, wird nicht eingestellt, wird standardmäßig nicht angezeigt
5、Hinzugefügt wurde die optionale Einstellung der Breite des rollbaren Textes, wird nicht eingestellt, wird automatisch auf die beste Breite angepasst
使用方法：
1、Erstellen Sie Ihre Html, verweisen Sie auf das jQuery-Framework und das mousewheel-Plugin sowie unser leonaScroll-1.1.js-Plugin
2、Verwendung von $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) Plugin aufrufen
3、Eigenschaftsbeschreibung：
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 />Beschreibung：Ein benutzerdefinierter Scrollbalken, der auf dem jQuery-Framework basiert und den Mousewheel-Plugin kombiniert
<br /><span style="color:red">(Wenn der Text den Anzeigebereich nicht übersteigt, muss die Scrollleiste angezeigt werden)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br /> Willkommen bei leonaScroll-1.1.js, wenn Sie während der Verwendung weitere Probleme entdecken, freuen wir uns auf Ihre Korrekturen!
<br />Autor：leona
<br />Veröffentlichungsdatum：2016-6-16
<br />Blog：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d/</a>
<br /><span style="color:red">(Wenn der Text nicht den Anzeigebereich übersteigt, wird die Scrollleiste standardmäßig nicht angezeigt)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br /> Willkommen bei leonaScroll-1.1.js, wenn Sie während der Verwendung weitere Probleme entdecken, freuen wir uns auf Ihre Korrekturen!
<br /> Aktualisierung：1.1Version
<br />1、Bekannte Fehler im frühen Version wurden behoben, wie z.B. die Anpassung des Textinhalts des Benutzers nicht möglich, das css-Datei ist komplex
<br />2、Der Benutzer muss nur eine Methode aufrufen, um das Plugin zu verwenden, es ist nicht erforderlich, wie zuvor die Class des Rolltextbereichs und des äußeren Elements hinzuzufügen und zu definieren, was mehr Freiheit bietet
<br />3、Hinzugefügt wurden die Einstellungen für die Breite der Rollleiste, die Höhe der Aufwärts/Abwärts-Justierungstaste und den Bereich des rollbaren Textes
<br />4、Hinzugefügt wurde die optionale Einstellung, ob die Rollleiste angezeigt wird, wenn der Textinhalt nicht übertrifft, wird nicht eingestellt, wird standardmäßig nicht angezeigt
<br />5、Hinzugefügt wurde die optionale Einstellung der Breite des rollbaren Textes, wird nicht eingestellt, wird automatisch auf die beste Breite angepasst
<br /> Verwendungsweise：
<br />1、Erstellen Sie Ihre Html, verweisen Sie auf das jQuery-Framework und das mousewheel-Plugin sowie unser leonaScroll-1.1.js-Plugin
<br />2、Verwendung von $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) Plugin aufrufen
<br />3、Eigenschaftsbeschreibung：
<br /> speed Geschwindigkeit der Rolle, muss
<br /> scroll_text Class des rollbaren Textinhalts, muss
<br /> sWidth Breite der Rollleiste, muss
<br /> updownH Höhe der Aufwärts/Abwärts-Justierungstaste, muss
<br /> scrollbar Wird die Rollleiste angezeigt, wenn der Textinhalt nicht übertrifft, false angezeigt, nicht angezeigt true, optional, Standard ist true
<br /> text_width Breite des rollbaren Textes, optional
</div>
</div>
</div>
<script type="text/javascript">
//Rollenleistenaufrufmethode
$(".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>
Zwei, Jquery
$.fn.extend({
generateUUID: function () {
//Numerische Generierung einzigartiger 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 8)).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();
//Fügen Sie HTML für den Scrollbalken hinzu
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 + "" + scrollStyle + "");
//变量声明
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;
1 + index + + index + " + "px"); }
} else return;
//Mauszieher-Ereignis für 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;
});
//Definition der Regeln für den Auf- und Ab-Roll
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //Regulierung der Schiebewechselgeschwindigkeit
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);
};
//Oben-und-unten-Feinabstimmungs-Button-Ereignis
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 自定义滚动条插件，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#oldtoolbag.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。