English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js, se encontrar mais problemas durante o uso, bem-vindo a correção!
更新：1.1Versão
1、Corrigiu alguns bugs do versão inicial, como não ser capaz de se ajustar automaticamente ao conteúdo do texto do usuário, arquivo css complexo
2、O usuário só precisa chamar um método para usar o plugin, sem precisar adicionar e definir o campo de texto de rolagem e o elemento externo da classe original, tornando-se mais livre
3、Adicionou a configuração da largura da barra de rolagem, altura do botão de ajuste vertical e a área de texto de rolagem
4、Adicionou a opção de configuração opcional para mostrar a barra de rolagem quando o conteúdo do texto não exceder, se não for configurado, o padrão é não mostrar
5、Adicionou a opção de configuração opcional para a largura do texto de rolagem, se não for configurado, será ajustado automaticamente para o melhor tamanho
使用方法：
1、Crie seu Html, cite o framework jquery e o plugin mousewheel, e nosso leonaScroll-1.1.js plugin
2、Use $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) para chamar o plugin
3、Descrição de atributos：
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 />Introdução: É uma barra de rolagem personalizada baseada no framework jQuery, combinada com o plug-in mousewheel
<br /><span style="color:red">(Quando não exceder a área de texto visível, a barra de rolagem deve ser exibida)</span>
<}}/div>
<}}/div>
<}}/div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />Bem-vindo ao leonaScroll-1.1.js, se encontrar mais problemas durante o uso, bem-vindo a correção!
<br />Autor: leona
<br />Data de publicação：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">(Quando não exceder a área de texto visível, a barra de rolagem padrão não é exibida)</span>
<}}/div>
<}}/div>
<}}/div>
<div class="right">
<div class="usage">
<div class="usage_text">
leonaScroll-1.1.js
<br />Bem-vindo ao leonaScroll-1.1.js, se encontrar mais problemas durante o uso, bem-vindo a correção!
<br />Atualização：1.1Versão
<br />1、Corrigiu alguns bugs do versão inicial, como não ser capaz de se ajustar automaticamente ao conteúdo do texto do usuário, arquivo css complexo
<br />2、O usuário só precisa chamar um método para usar o plugin, sem precisar adicionar e definir o campo de texto de rolagem e o elemento externo da classe original, tornando-se mais livre
<br />3、Adicionou a configuração da largura da barra de rolagem, altura do botão de ajuste vertical e a área de texto de rolagem
<br />4、Adicionou a opção de configuração opcional para mostrar a barra de rolagem quando o conteúdo do texto não exceder, se não for configurado, o padrão é não mostrar
<br />5、Adicionou a opção de configuração opcional para a largura do texto de rolagem, se não for configurado, será ajustado automaticamente para o melhor tamanho
<br />Método de uso：
<br />1、Crie seu Html, cite o framework jquery e o plugin mousewheel, e nosso leonaScroll-1.1.js plugin
<br />2、Use $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) para chamar o plugin
<br />3、Descrição de atributos：
<br /> speed Velocidade de rolagem, obrigatório
<br /> scroll_text Class do conteúdo de texto de rolagem, obrigatório
<br /> sWidth Largura da barra de rolagem, obrigatório
<br /> updownH Altura do botão de ajuste vertical, obrigatório
<br /> scrollbar Mostrar a barra de rolagem quando o conteúdo do texto não exceder, mostrar como false, não mostrar como true, opcional, o padrão é true
<br /> text_width Largura do texto de rolagem, opcional
<}}/div>
<}}/div>
<}}/div>
<script type="text/javascript">
//Chamada de método da barra de rolagem
$(".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>
second, Jquery
$.fn.extend({
generateUUID: function () {
//unique ID number generation
var d = new Date().getTime();
var uuid = 'xxxxxxxx-xxxx-4xxx--xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = (d + Math.random(), * 16) % 16 | 0; d = Math.floor(d / 16); return (c == 'x' &63; 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();
//add scrollbar 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 + "" + 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;
//mouse drag div event
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;
});
//Definição das regras de rolagem vertical
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; //Ajuste da velocidade de deslizamento
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ão de micro-ajuste vertical
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 rolagem da roda
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;
}
});
}
});
}
});
O que foi mencionado acima é o jQuery leonaScroll apresentado pelo editor para vocês. 1.1 Plugin de barra de rolagem personalizada, espero que ajude a todos. Se tiverem alguma dúvida, por favor, deixem um comentário, o editor responderá a todos a tempo.
Declaração: o conteúdo deste artigo é extraído da internet, pertence ao respectivo proprietário. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos de propriedade, não foi editado manualmente e não assume responsabilidade por questões legais relacionadas. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @ para denunciar e forneça provas relevantes. Se confirmado, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.)