English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
leonaScroll-1.1最新版
leonaScroll-1.1.js
欢迎使用leonaScroll-1.1.js, 사용 중에 더 많은 문제를 발견하면 지적해 주세요!
更新：1.1버전
1、이전 초기 버전에서의 일부 버그를 수정했습니다. 예를 들어, 사용자의 텍스트 내용을 자동으로 맞추지 못하거나 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滚动文本内容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 />介绍：是一款基于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、이전 초기 버전에서의 일부 버그를 수정했습니다. 예를 들어, 사용자의 텍스트 내용을 자동으로 맞추지 못하거나 css 파일이 복잡하다는 것
<br />2、사용자는 단일 메서드를 호출하여 이 플러그인을 사용할 수 있으며, 원래 class 이름에 따라 스크롤 텍스트 영역 및 외부 요소를 추가하고 정의할 필요가 없어 더 자유롭습니다
<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 스크롤 텍스트 내용의 class를 반드시 설정해야 합니다
<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>
2. Jquery
$.fn.extend({
generateUUID: function () {
//고유 ID数值 생성
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();
//스크롤바 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-사용자-선택: 없음; /*파이어폭스*/ -webkit-사용자-선택: 없음; /*webkit 브라우저*/ -ms-사용자-선택: 없음; /*IE10*/ -khtml-사용자-선택: 없음; /*초기 브라우저*/ 사용자-선택: 없음; }";
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 (delta ==
return false;
} -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에 이메일을 보내서 신고할 때, #을 @으로 변경하고 관련 증거를 제공해 주세요. 증거가 확인되면, 사이트는 즉시 의심스러운 저작권 내용을 삭제합니다.