jQuery leonaScroll 1.1 أداة تخصيص شريط التمرير (موصى به)

أحدث إصدار من leonaScroll-1.1

leonaScroll-1.1.js

مرحبًا بك في leonaScroll-1.1.js، إذا لاحظت أي مشاكل أثناء الاستخدام، فلا تتردد في الإبلاغ عنها!

تحديث: إصدار 1.1

1、تم إصلاح بعض الأخطاء في الإصدار الأولي، مثل عدم التكيف التلقائي للنص المكتوب من قبل المستخدم، وملفات css معقدة

2、يحتاج المستخدم فقط إلى استدعاء طريقة واحدة لاستخدام هذا المكون الإضافي، وليس من الضروري إضافة وتعريف منطقة النص الم-scrollable والعناصر الخارجية الخاصة بك بناءً على اسم الصنف الأصلي، مما يجعله أكثر حرية

3、أضفت عرض شريط التمرير، ارتفاع الأزرار التدرجية، وإعداد منطقة النص الم-scrollable

4、أضفت خيار إعداد عرض شريط التمرير عند عدم تجاوز النص، إذا لم يتم إعدادها، سيكون الافتراضي هو عدم العرض

5、أضفت خيار إعداد عرض النص الم-scrollable، إذا لم يتم إعدادها، سيتم تكييفها تلقائيًا إلى الأفضل

استخدام الطريقة：

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! هاه!

بالطبع، إذا واجه أي شخص مشكلة أو عدم مرونة، فلا تتردد في إخباري، وسأحاول تحسينه

هذا الملحق هو مجرد شيء كتبته بينما كنت أتعلم، إذا كان هناك أي نقاط ضعف، فأرجو منكم التسامح

شكرًا جزيلاً للأصدقاء الذين ساعدوني وأجابوا على أسئلتي خلال تطوير هذا الملحق. أشكركم على مساعدة السيد 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، اختياري، بالافتراض يُعرض
<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;
إذا (parameter.scrollbar == صحيح || parameter.scrollbar === غير_محدد) {
إذا (text_p >= 1) $(".leonas" + index + "").css("display", "none"); آخره $(".leonas" + index + "").css("display", "block"); scroll_b.css("height", بإتش + "px"); }
} آخره return;
//حدث سحب div
تعريف يجب_الحركة = غير_صحيح، موسي = 0;
scroll_b.mousedown(function (event) { يجب_الحركة = صحيح; تعريف بإتش_توب = scroll_b.position().top; موسي = event.pageY - بإتش_توب; });
$(document).mouseup(function (event) { يجب_الحركة = غير_صحيح; });
$(document).mousemove(function (event) {
إذا (يجب_الحركة) {
تعريف سماوي_الفأرة = event.pageY، بإتش_توب = سماوي_الفأرة - موسي، textY = بإتش_توب / بإتش_ماكس * text_show;
إذا (بإتش_توب <= 0) scroll_b.css("top", 0); $(celem).css("top", 0); return;
إذا (بإتش_توب >= بإتش_ماكس - بإتش) scroll_b.css("top", بإتش_ماكس - بإتش); $(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) { //向上
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); //需要计时器
return;
}
scroll_b.css("top", bH_Top - h);
};
if (direction == -1) { //向下
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); //需要计时器
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;
} if (delta == -1) { //down
goGun(-1, 0);
if (Math.ceil(scroll_b.position().top) != Math.ceil(bH_max - bH))
return false;
}
});
}
});
}
});

ما تم ذكره أعلاه هو ما قدمه المحرر لكم من مكتبة جي كي إي ليونا سكرول 1.1، نأمل أن يكون مفيداً لكم، إذا كان لديكم أي استفسارات، فلا تترددوا في ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت ممكن!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، ويحق لصاحب الحقوق أن يكون مالكاً له، تم جمع المحتوى من قبل المستخدمين عبر الإنترنت وتم تحميله بشكل مستقل، ويستخدم هذا الموقع دون امتلاك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # بـ @) للإبلاغ، وتقديم الدليل، وإذا تم التحقق من ذلك، سيتم حذف المحتوى المزعوم فوراً.

تعليمية الأساس

أنت قد تحب