إن تكرار بعض العجلات قد لا يكون أمرًا سيئًا بشكل انتقائي. أضافت مدونة آرون قائمة موقوفة ، والتي يبدو أنها طويلة جدًا. على الرغم من أن هذا النوع من الخدعة ليس هو المرة الأولى التي رأيتها فيها ، إلا أنني لم أكتبها بنفسي أبدًا. اليوم سأكتب بشكل انتقائي عن هذه الوظيفة. فيما يلي عملية تطوير هذه العجلة ، والتي يمكن اعتبارها أيضًا عملية تحليل وتنفيذ وثيقة متطلبات.
العنوان التجريبي: http://sandbox.runjs.cn/show/to8wdmuy
رمز المصدر تنزيل: https://github.com/bjtqti/floatmenu
الخطوة الأولى هي إنشاء بنية قسم DOM:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = "utf-8">
<title> appCarrier </title>
<Link Rel = "STYLESHEET" href = "menu.css">
</head>
<body>
<div id = "content">
<h1 id = "test1"> test1 </h1>
<p> يمكن أن يضر الماضي. ولكن يمكنك إما الركض منه أو التعلم منه </p>
<p> كان الماضي مؤلمًا ، لكنك إما تهرب أو تنمو منه </p>
<p> يلتقي المرء بمصيره على الطريق الذي يأخذه لتجنبه </p>
<p> غالبًا ما يكون في الطريق للهروب من المصير ، لكنه يواجه بشكل غير متوقع </p>
<p> من المفترض أن يتم كسر القواعد </p>
<p> يجب كسر القواعد. </p>
<p> قد تجعد الجلد ، ولكن للتخلي عن الحماس يتجعد الروح. </p>
<p> إن مرور الوقت يجعل الوجه قديمًا فقط ، لكن العاطفة لم تعد تجعل القلب ذبلًا. </p>
<h1 id = "test2"> test2 </h1>
<p> فقط من خلال ممارسة المعرفة المستمرة التي تعلمتها ، هل يمكنك إتقانها حقًا. </p>
<p> عش كل يوم على أكمل وجه. </p>
<p> استمتع كل يوم. </p>
<p> حافظ على عينيك على النجوم ، وقدميك على الأرض. </p>
<p> لديك طموحات ربيلة والحفاظ على قدميك على الأرض. </p>
<p> دائمًا ما يكون الأمر لمغامرة غير متوقعة. </p>
<p> اذهب جاهزًا لبدء مغامرة غير متوقعة في أي وقت. </p>
<p> الحياة مليئة بخيبة الأمل. لا يمكنك أن تسكن في الأشياء. عليك المضي قدمًا. </p>
<p> غالبًا ما تكون الحياة غير راضية ، ولا تنغمس في الماضي ، والمضي قدمًا بشجاعة. </p>
<p> أنا روح حرة. لا يمكن أن أكون محصورة. </p>
<p> روحي حرة ويجب ألا تكون ملزمة. </p>
<p> في بعض الأحيان يرى القلب ما هو غير مرئي للعين. </p>
<p> يمكن لأولئك الذين هم بعيدا عن الأنظار أن يشعروا به </p>
<p> الأشياء البسيطة هي أيضًا الأشياء الأكثر استثنائية ، ولا يمكن للحكيم سوى رؤيتهم. </p>
<p> الشيء الأكثر عادية هو أيضًا الشيء الأكثر استثنائية ، وفهمه الحكيم فقط. </p>
<h1 id = "test3"> test3 </h1>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<h1 id = "test4"> test4 </h1>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
<p> كم عدد xxxxxx </p>
</div>
<div id = "menubar">
<p> إخفاء </p>
<ul>
<li> <a href = "#test1"> test1 </a> </li>
<li> <a href = "#test2"> test2 </a> </li>
<li> <a href = "#test3"> test3 </a> </li>
<li> <a href = "#test4"> test4 </a> </li>
</ul>
</div>
</body>
<script src = "menu.js"> </script>
</html>
الخطوة الثانية هي إعداد ملف CSS:
نسخة الكود كما يلي:
ul {
نوع القائمة: لا شيء ؛
}
أ {
تدمير النص: لا شيء ؛
}
/*منطقة محتوى المقالة*/
#محتوى {
العرض: 400 بكسل ؛
الهامش: 0 Auto ؛
حجم الخط: 2
}
/*قائمة العائمة*/
.قائمة طعام {
الموقف: ثابت ؛
أعلى: 20 ٪ ؛
اليمين: 0 ؛
العرض: 200 بكسل ؛
الحدود: 1 بكسل رمادي صلب.
الحدود الحدودية: 5px ؛
}
.menu li {
الارتفاع: 2EM ؛
Line-Leight: 2em ؛
}
.أحمر {
اللون: أحمر.
}
.يخفي {
العرض: لا شيء ؛
}
/*إخفاء القائمة العائمة*/
.slidein {
Transform: Translate3D (202px ، 0 ، 0) ؛
مدة الانتقال: .5S ؛
}
/*عرض القائمة العائمة*/
.slideout {
Transform: Translate3D (0 ، 0 ، 0) ؛
مدة الانتقال: .5S ؛
}
.static {
اللون:#007AFF ؛
محاذاة النص: المركز ؛
}
/*إظهار الكرة العائمة*/
.toshow {
العرض: كتلة ؛
العرض: 4.8em ؛
الارتفاع: 2EM ؛
Line-Leight: 2em ؛
الحدود الراديوس: .5em ؛
الحدود: 1 بكسل رمادي صلب.
Transform: Translate3D (-5em ، 0 ، 0) ؛
مدة الانتقال: 1S ؛
}
تبدأ الخطوة الثالثة في كتابة رمز JS:
نسخة الكود كما يلي:
(وظيفة (مستند) {
// جمع مواقع الارتباط لكل فصل
var pos = [] ،
// مجموعة العناصر في القائمة
الروابط = doc.getElementsByTagname ('A') ،
// جمع عنوان الفصل
عناوين = doc.getelementsbytagname ('H1') ،
// قائمة معلقة
القائمة = doc.getElementById ('menubar') ،
// الاختيار الحالي
CurrentItem = null ؛
// أضف نمطًا أحمر
var addClass = function (element) {
CurrentItem && currentItem.RemoVeatTribute ('class') ؛
element.setattribute ('class' ، 'Red') ؛
CurrentItem = عنصر ؛
} ،
// تم طرح صفحة الويب عالية:
getScrollTop = function () {
إرجاع Math.ceil (document.body.scrolltop) +1 ؛
} ،
// احسب موضع التمرير
startCroll = function () {
var scrolltop = getScrollTop () ،
len = titles.length ،
أنا = 0 ؛
// المادة 1
if (scrolltop> = 0 && scrolltop <pos [0]) {
addClass (الروابط [0]) ؛
يعود؛
}
// آخر واحد
if (scrolltop> = pos [len-1]) {
addClass (الروابط [len-1]) ؛
يعود؛
}
//وسط
لـ (؛ i <len ؛ i ++) {
if (scrolltop> pos [i] && scrolltop <pos [i+1]) {
addClass (الروابط [i]) ؛
استراحة؛
}
}
} ؛
// انقر على الرابط في القائمة لتغيير اللون
menu.onclick = function (e) {
var target = e.target || E.Srcelement ؛
if (target.nodename.toLowerCase () === 'A') {
// قائمة مؤشر حالة العنصر
addClass (الهدف) ؛
يعود؛
}
if (target.nodename.toLowerCase () === 'p') {
if (target.className == 'static') {
// إخفاء القائمة
this.className = 'menu slidein' ؛
setTimeout (function () {
target.className = 'static toshow' ؛
target.innerhtml = 'show' ؛
} ، 1000) ؛
}آخر{
// عرض القائمة
target.className = 'static' ؛
target.innerhtml = 'Hide' ؛
this.className = 'menuit slideout' ؛
}
}
}
// احسب الموضع الأولي لكل فصل
var ln = tutles.length ؛
بينما (-ln> -1) {
//titles budaplen.
pos.unshift (عناوين [ln] .offsettop) ؛
}
startCroll () ؛
// التمرير
window.onscroll = function () {
startCroll ()
}
})(وثيقة)؛
تحليل:
1. تنفيذ القفز التلقائي إلى القسم المحدد
يمكن القيام بهذه الخطوة باستخدام وظيفة المرساة لعلامة <A>. نظرًا لأن HTML5 لا يدعم سمة الاسم في المستقبل (HTML5 لا يدعمها. حدد اسم المرساة.) ، فكر في استخدام المعرف للقفز.
2. تحديد الفصل في المحتوى على اليسار ينتمي إلى العنصر في القائمة العائمة.
هذه الخطوة هي نقطة صعبة ، دعنا نحللها بإيجاز:
2.1 الحالة الأولى هي النقر فوق عنصر القائمة يدويًا. هذا سهل ، فقط حدد العنصر الذي تم النقر عليه.
2.2 في الحالة الثانية ، قم بالتمرير أو اسحب شريط التمرير عبر زر الماوس الأوسط. في هذا الوقت ، تحتاج إلى ربط المحتوى على اليسار وعناصر القائمة على اليمين. هذا هو الجزء الأكثر صعوبة. فكر في استراتيجية تنفيذ خطوة بخطوة ، بدءًا من السهولة ثم الصعبة ، وكل واحد يتخطى.
2.2.1 أولاً جمع الارتفاع الإحداثي لعنصر العنوان. هذا هو الارتفاع العمودي لجميع علامات H1. حفظ المصفوفة 1.
2.2.2 جمع العنصر A في عنصر القائمة وتخزينه في Array 2.
2.2.3 استمع إلى حدث التمرير وحدد عنصر القائمة الذي ينتمي إليه المحتوى الحالي.
عند اتخاذ خطوة واحدة ، يوصى برسم صورة على ورقة المخطوطة:
A1
******************
* A2
*
******************
* A3
*
******************
*
* A4
*
في كل مرة تقوم فيها بالتمرير ، ستحدد أي نطاق مسافة التمرير الحالية. إذا كان 0 إلى A1 ، فهو الفصل 1 و A1 إلى A2 ، فهو الفصل 2 ، وهلم جرا.
بخصوص ارتفاع موضع العنصر ، أنا ببساطة أستخدم Element.OffSettop للحصول عليه هنا. قد تكون هناك قضايا التوافق. إذا كنت تستخدم jQuery ، فيجب أن يكون $ ('element'). Offset (). TOP ،
وبالمثل ، استخدمت ببساطة document.body.scrolltop للحصول على ارتفاع شريط التمرير. إذا تم استبداله بـ jQuery ، فيجب أن يكون $ (window) .scrolltop () ؛
الغرض من الرسم هو تجميع المشكلات التجريدية ، ومساعدتنا في التفكير ومعرفة القواعد. ربما تبدو أطول من خلال تسميتها "النمذجة".
يجب التأكيد على أن العلاقات في المصفوفة 1 والمصفوفة 2 يجب أن تتوافق واحدة تلو الأخرى. على سبيل المثال ، فإن <a href = "#h1"> هو <h1 id = "h1">.
2.3 في الحالة الثالثة ، مؤشر حالة القائمة عند إدخال الصفحة مباشرة. على سبيل المثال ، إذا قمت بإدخال عنوان مثل index.html#H3 ، فيجب تسليط الضوء على H3 في القائمة.
3. تنفيذ العرض وإخفاء الرسوم المتحركة للقائمة العائمة.
3.1 يجب أن تكون هذه الخطوة بسيطة نسبيًا ، يمكنك التفكير أولاً. فقط استخدم خاصية Tramsform لـ CSS3. انها بسيطة وفعالة. إذا كنت متصفحًا ، فيرجى أن تكون متوافقًا.
لاحظ أن التحويل: Translate3D (المحور السيني ، المحور ص ، محور z) ؛ يمكن أن يؤدي استخدام ثلاثي الأبعاد إلى استخدام تسريع الأجهزة لزيادة تأثيرات الرسوم المتحركة ، لكن استهلاك الطاقة سيزداد ، لذلك الاستفادة من ذلك! المعلمة الأولى هي التحكم في الاتجاهات اليمنى واليسرى. إذا كان ذلك إيجابيًا ، فهذا يعني الانتقال إلى اليمين ، وإذا كان سلبيًا ، فهذا يعني الانتقال إلى اليسار. هذا في الواقع ليس صارما. في الواقع ، يجب تحديده بناءً على النقطة المرجعية. على سبيل المثال ، عندما تكون إحداثيات X لعنصر ما 0 ، يتم زيادة قيمة X إلى اليمين وتخفيض إلى اليسار ، ويتم إعادة تعيين 0.
بعد التحليل ، يتم كتابة الرمز. لا يوجد شيء ليقوله عن هذا. استمتع بالشعور الموسيقي الناتج عن طريق كتابة لوحة المفاتيح.
بعد الكتابة ، معاينةها ، انقر فوق القائمة ، وقفز إلى الفصل المحدد ، وانقر فوق العنصر لتحويل اللون الأحمر ، وتحديث الصفحة الحالية ، وصحيح عرض التبعية. حرك عجلة التمرير ، وتتغير عناصر القائمة وفقًا للتغييرات في المحتوى. اسحب شريط التمرير. الشيء نفسه صحيح. أخيرًا ، انقر لإخفاء ، وتراجع القائمة ، وانقر للعرض ، وتخرج القائمة. هذا سوف يكمل وظيفة التعليق.
ما سبق هو كل شيء عن هذا المقال ، أتمنى أن تنال إعجابك.