English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js，如果您在使用过程中发现更多问题，欢迎提出批评和建议！
更新：1.1版本
1、修复了前面初始版本中的一些bug，比如不能自适应用户的文本内容，css文件繁杂
2、用户只需调用一个方法即可使用该插件，无需按照原来的class类名去添加和定义你的滚动条文本域及外层元素，这更加自由
3、增加了滚动条宽度、上下微调按钮高度，以及滚动文本区域的设置
4、增加了可选设置选项以设置文本内容未超出时是否显示滚动条，如果没有设置，默认不显示
5、增加了可选设置选项以设置滚动文本宽度，如果没有设置，将自动适配到最佳宽度
使用方法：
1、建立好您的Html，引用jquery框架与mousewheel插件，及我们的leonaScroll-1.1.js插件
2、Вызов плагина с помощью $("")..LeonaScroll({speed,scroll_text,sWidth,updownH})
3、Описание свойств:
speed скорость прокрутки, обязательно
scroll_text класс содержимого скролируемого текста, обязательно
sWidth ширина ползунка, обязательно
updownH высота кнопок прокрутки вверх и вниз, обязательно
scrollbar показывает ли ползунок, когда текст не выходит за пределы, false - показывает, true - не показывает, по выбору, по умолчанию true
text_width ширина скролируемого текста, по выбору
LeonaScroll-1.0 предназначен только для обучения и изучения, эта версия является моей версией для обучения, и у нее есть недостатки, новая версия исправила много проблем, но все еще存在着二次调用问题. Однако уже есть решение, просто я ленив, не исправил, жду исправления в версии 1.2! Ха-ха!
Конечно, если кто-то использует его и встречает баги или неудобства, пожалуйста, предложите, чтобы я мог продолжить улучшать.
Эта маленькая вставка, написанная в свободное время, если есть недостатки, пожалуйста, извините.
В конце хочу поблагодарить друзей, которые помогали и отвечали на мои вопросы в процессе разработки этого плагина. особенно хочу поблагодарить господина 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 />Описание: это是一款基于jquery фреймворка, интегрирующий плагин mousewheel для создания пользовательской полосы прокрутки
<br /><span style="color:red">(Требуется показ полосы прокрутки, если текст выходит за пределы области отображения)</span>
</div>
</div>
</div>
<div class="center">
<div class="welcome">
<div class="welcome_text">
leonaScroll-1.1.js
<br />Добро пожаловать в leonaScroll-1.1.js, если вы обнаружите еще больше проблем в процессе использования, пожалуйста, исправьте их!
<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">
leonaScroll-1.1.js
<br />Добро пожаловать в leonaScroll-1.1.js, если вы обнаружите еще больше проблем в процессе использования, пожалуйста, исправьте их!
<br />Обновление: версия 1.1
<br />1、Исправлены некоторые ошибки в предыдущей версии, такие как inability to adapt to the user's text content and complex css files
<br />2. Пользователь может использовать плагин, вызывая один метод, без необходимости добавлять и определять классы текстовых полей прокрутки и внешних элементов, что делает его более свободным
<br />3. Добавлены настройки ширины полосы прокрутки, высоты кнопок микропараметров и области прокрутки текста
<br />4. Добавлена опциональная настройка показа полосы прокрутки при не превышении текста, по умолчанию не показывает
<br />5. Добавлена опциональная настройка ширины текста прокрутки, если не настроено, автоматически адаптируется к оптимальной ширине
<br />Метод использования:
<br />1. Создайте ваш Html, включите jQuery-фреймворк и плагин mousewheel, а также наш плагин leonaScroll-1.1.js
<br />2. Используйте $("")..LeonaScroll({speed,scroll_text,sWidth,updownH}) для вызова плагина
<br />3. Описание свойств:
<br /> speed скорость прокрутки, обязательно
<br /> scroll_text класс содержимого прокрутки, обязательно
<br /> sWidth ширина полосы прокрутки, обязательно
<br /> updownH высота кнопок микропараметров, обязательно
<br /> scrollbar показывает ли полосу прокрутки при не превышении текста, false - не показывает, true - показывает, опционально, по умолчанию true
<br /> text_width ширина текста прокрутки, опционально
</div>
</div>
</div>
<script type="text/javascript">
// метод вызова полосы прокрутки
$(".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 () {
//генерация уникального идентификатора
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();
//добавление 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>");
//добавление 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;
//鼠标拖动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);
}
});
// определяем правила прокрутки вверх и вниз
function goGun(direction, timer) {
bH_Top = scroll_b.position().top;
var h = 0; h += parameter.speed; // регулировка скорости скольжения
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);
}
// верхний и нижний регулятор событий
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;
}
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});
Как сказал редактор, представленный вам jQuery leonaScroll 1.1 плагин для создания собственных полос прокрутки, надеюсь, он поможет вам. Если у вас есть какие-либо вопросы, пожалуйста, оставляйте комментарии, редактор ответит вам своевременно!
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен пользователями самостоятельно, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите содержимое,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @), чтобы сообщить о нарушении, и предоставьте соответствующие доказательства. При подтверждении правонарушения сайт немедленно удалит涉嫌侵权的内容.