English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js, si vous découvrez d'autres problèmes pendant l'utilisation, n'hésitez pas à les signaler !
更新：1.1Version
1、Correction de certains bugs de la version initiale précédente, tels que l'incapacité à s'adapter au contenu texte de l'utilisateur, fichiers css complexes
2、L'utilisateur peut utiliser le plugin en appelant une seule méthode, sans avoir à ajouter et définir manuellement votre zone de texte défilant et votre élément externe de classe, ce qui est plus libre
3、Ajout des réglages de largeur de la barre de défilement, de la hauteur du bouton de réglage vertical et de la zone de texte défilant
4、Ajout d'une option de choix de l'affichage ou non de la barre de défilement lorsque le contenu du texte ne dépasse pas, par défaut non affiché
5、Ajout d'une option de largeur de texte défilant optionnelle, si elle n'est pas définie, elle sera automatiquement adaptée à la largeur optimale
使用方法：
1、Créez votre Html, incluez le cadre jquery et l'extension mousewheel, ainsi que notre leonaScroll-1.1.js plugin
2、Utilisez $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) pour appeler le plugin
3、Description des propriétés：
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 />Présentation : C'est un contrôle de défilement personnalisé basé sur le cadre jQuery, intégrant le plugin mousewheel
<br /><span style="color:red">(Si le texte ne dépasse pas la zone affichable, la barre de défilement doit être affichée)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br /> Bienvenue à leonaScroll-1.1.js, si vous découvrez d'autres problèmes pendant l'utilisation, n'hésitez pas à les signaler !
<br />Auteur : leona
<br />Date de publication :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">(Si le texte ne dépasse pas la zone affichable, la barre de défilement n'est pas affichée)</span>
</div>
</div>
</div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br /> Bienvenue à leonaScroll-1.1.js, si vous découvrez d'autres problèmes pendant l'utilisation, n'hésitez pas à les signaler !
<br /> Mise à jour：1.1Version
<br />1、Correction de certains bugs de la version initiale précédente, tels que l'incapacité à s'adapter au contenu texte de l'utilisateur, fichiers css complexes
<br />2、L'utilisateur peut utiliser le plugin en appelant une seule méthode, sans avoir à ajouter et définir manuellement votre zone de texte défilant et votre élément externe de classe, ce qui est plus libre
<br />3、Ajout des réglages de largeur de la barre de défilement, de la hauteur du bouton de réglage vertical et de la zone de texte défilant
<br />4、Ajout d'une option de choix de l'affichage ou non de la barre de défilement lorsque le contenu du texte ne dépasse pas, par défaut non affiché
<br />5、Ajout d'une option de largeur de texte défilant optionnelle, si elle n'est pas définie, elle sera automatiquement adaptée à la largeur optimale
<br /> Méthode d'utilisation：
<br />1、Créez votre Html, incluez le cadre jquery et l'extension mousewheel, ainsi que notre leonaScroll-1.1.js plugin
<br />2、Utilisez $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) pour appeler le plugin
<br />3、Description des propriétés：
<br /> speed Vitesse de défilement, obligatoire
<br /> scroll_text Class du contenu du texte défilant, obligatoire
<br /> sWidth Largeur de la barre de défilement, obligatoire
<br /> updownH Hauteur du bouton de réglage vertical, obligatoire
<br /> scrollbar Afficher ou non la barre de défilement lorsque le contenu du texte ne dépasse pas, affiché comme false, non affiché comme true, optionnel, par défaut true
<br /> text_width Largeur du texte défilant, optionnel
</div>
</div>
</div>
<script type="text/javascript">
//Méthode d'appel de la barre de défilement
$(".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>
deuxième partie: Jquery
$.fn.extend({
generateUUID: function () {
//génération de nombres uniques
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();
//ajouter HTML de barre de défilement
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;
//Clic de glisser du curseur sur le 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éfinir les règles de défilement vertical et horizontal
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //Régler la vitesse de glissement
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);
});
//Bouton de réglage vertical et horizontal
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
//Événement de roue d'ordinateur
if (text_p < 1) {
$("elem").bind("mousewheel", function (event, delta, deltaX, deltaY) {
if (delta == 1) {//up
goGun(1, 0);
if (delta ==
return false;
} -1) {//down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});
Ce que j'ai présenté ici est jQuery leonaScroll pour vous 1.1 Plugin de barre de défilement personnalisée, j'espère que cela vous sera utile. Si vous avez des questions, n'hésitez pas à me laisser un message, l'éditeur répondra à temps !
Déclaration : Le contenu de cet article est hébergé sur Internet, propriété de ses auteurs respectifs, contribué et téléchargé par les utilisateurs d'Internet de manière volontaire. Ce site ne détient pas de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, n'hésitez pas à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)