English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
<div class="usage_text">-1.1最新版
<div class="usage_text">-1.1leonaScroll
欢迎使用leonaScroll-1.1>Bienvenido a leonaScroll
更新：1.1>Actualización：
1Versión
2、Se han solucionado algunos errores de la versión inicial, como no poder adaptarse al contenido de texto del usuario, archivos css complicados
3、El usuario solo necesita llamar a un método para usar este plugin, no es necesario agregar y definir su área de texto desplazable y elementos externos según el nombre de clase original, lo que se vuelve más libre
4、Se agrega la configuración del ancho de la barra de desplazamiento, la altura del botón de ajuste vertical, la configuración del área del texto desplazable
5、Se agrega la opción de configuración opcional de si se muestra la barra de desplazamiento cuando el contenido del texto no sobrepasa, por defecto no se muestra
使用方法：
1、Configure su Html, cite el framework jquery y el plugin mousewheel, y nuestro leonaScroll-1.1.js plugin
2、Se agrega la opción de configuración opcional del ancho del texto desplazable, si no se configura, se ajustará automáticamente al ancho óptimo
3、Descripción de las propiedades：
speed 滚动速度，必须
scroll_text 滚动文本内容class，必须
sWidth 滚动条宽度，必须
updownH 上下微调按钮高度，必须
scrollbar 文本内容未超出时是否显示滚动条，显示为false，不显示为true，可选，默认为true
text_width 滚动文本宽度，可选
<div class="usage_text">-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/<div class="usage_text">-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">
<div class="usage_text">-1.1leonaScroll
<br />介绍：是一款基于jquery框架，结合mousewheel插件实现的自定义滚动条
<br /><span style="color:red">(当未超出可显示文本区域时，要求显示滚动条)</span>
/div>
/div>
/div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
<div class="usage_text">-1.1leonaScroll
<br /.js-1.1>Bienvenido a leonaScroll
<br />作者：leona
<br />发布时间：2016-6-16
<br />博客：<a href="http://www.cnblogs.com/leona-d/">http://www.cnblogs.com/leona-d//a>
<br /><span style="color:red">(当未超出可显示文本区域时，默认不显示滚动条)</span>
/div>
/div>
/div>
<div class="right">
<div class="usage">
<div class="usage_text">-1.1leonaScroll
<br /.js-1.1>Bienvenido a leonaScroll
<br /.js, si encuentra más problemas durante el uso, le invitamos a corregirlos!1.1>Actualización：
<br />1Versión
<br />2、Se han solucionado algunos errores de la versión inicial, como no poder adaptarse al contenido de texto del usuario, archivos css complicados
<br />3、El usuario solo necesita llamar a un método para usar este plugin, no es necesario agregar y definir su área de texto desplazable y elementos externos según el nombre de clase original, lo que se vuelve más libre
<br />4、Se agrega la configuración del ancho de la barra de desplazamiento, la altura del botón de ajuste vertical, la configuración del área del texto desplazable
<br />5、Se agrega la opción de configuración opcional de si se muestra la barra de desplazamiento cuando el contenido del texto no sobrepasa, por defecto no se muestra
<br />Uso:
<br />1、Configure su Html, cite el framework jquery y el plugin mousewheel, y nuestro leonaScroll-1.1.js plugin
<br />2、Se agrega la opción de configuración opcional del ancho del texto desplazable, si no se configura, se ajustará automáticamente al ancho óptimo
<br />3、Descripción de las propiedades：
<br /> speed Velocidad de desplazamiento, obligatorio
<br /> scroll_text Clase del contenido del texto desplazable, obligatorio
<br /> sWidth Ancho de la barra de desplazamiento, obligatorio
<br /> updownH Altura del botón de ajuste vertical, obligatorio
<br /> scrollbar Si se muestra la barra de desplazamiento cuando el contenido del texto no sobrepasa, se muestra como false, no se muestra como true, opción, por defecto true
<br /> text_width Ancho del texto desplazable, opción
/div>
/div>
/div>
<script type="text/javascript">
//Método de llamada a la barra de desplazamiento
$(".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>
dos, Jquery
$.fn.extend({
//generateUUID: function () {
generación numérica de ID único
var d = new Date().getTime();-var uuid = 'xxxxxxxx-4xxxx-xxx-yxxx/xxxxxxxxxxxx'.replace(/[xy]
g, function (c) { + var r = (d * 16Math.random() 16 ) % / 16| 0; d = Math.floor(d63); return (c == 'x' ; r : (r & 0x816);
)).toString(
}); return uuid;
},
LeonaScroll: function (parameter) {
var Sname = $(this).selector;
//变量声明
return this.each(function () {
//agregar Html de barra de desplazamiento
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;
//鼠标拖动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;
});
//Definir las reglas de desplazamiento de arriba y abajo
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //Ajuste de velocidad de deslizamiento
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);
});
//Ajuste de botón de arriba y abajo
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
//Evento de rueda de desplazamiento
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;
}
});
}
});
}
});
Lo mencionado anteriormente es el jQuery leonaScroll que el editor les ha presentado 1.1 Plugin de barra de desplazamiento personalizada, espero que sea útil para todos. Si tienen alguna pregunta, no dudes en dejar un mensaje, el editor responderá a tiempo.
Declaración: el contenido de este artículo se obtiene de la red, pertenece al autor original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha procesado editorialmente y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, por favor reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.