لقد قمت للتو ببناء موقع الشركة على الويب وتم تمريره من خلال ملء الشاشة ، مما أدى إلى تحسين تجربة التصفح للموقع الرسمي بشكل كبير. لذلك دعونا نلخص طريقة استخدام FullPage.js. مرحبا بك لتصحيح لي
1. مقدمة إلى fullpage.js
FullPage.js هي مجموعة من المكونات الإضافية JS التي تنفذ التمرير على شاشة كاملة للمتصفح. تستخدم العديد من مواقع الويب الآن لتحقيق تجربة تصفح أفضل.
الوظائف التي يمكن تحقيقها:
• الدعم للأمام والخلف والتحكم في لوحة المفاتيح
• وظائف رد الاتصال المتعددة
• دعم أحداث الهاتف المحمول والكمبيوتر اللوحي
• دعم الرسوم المتحركة CSS3
• دعم تكبير نافذة
• التعديل التلقائي عند تكبير النافذة
• يمكن تعيين عرض التمرير ، لون الخلفية ، سرعة التمرير ، خيارات الحلقة ، عمليات الاسترجاعات ، محاذاة النص ، إلخ.
2. تحميل البرنامج المساعد
NPM | NPM تثبيت FullPage.js
Bower | Bower Install FullPage.js
github | https: //github.com/alvarotrigo/fullpage.js/
CDN | https: //cdnjs.com/libraries/fullpage.js
3. طريقة مقدمة الملف
<Link Rel = "STYLESHEET" href = "css/jquery.fullpage.css"> <script src = "js/jquery.min.js"> </script> <script src = "js/jquery.fullpage.js
ملاحظة: يجب عليك أولاً تقديم jQuery ثم تقديم صفحة Full. عندما بدأت في كتابة العرض التوضيحي لأول مرة ، لم يتم تحقيق التأثير بسبب الترتيب الخاطئ ، وخطأ المتصفح في FullPage.js. jQuery غير محدد.
4. اكتب رمز HTML
<div id = "fullpage"> <viv> section1 </viv> <viv> section2 </viv> <viv> section3 </viv> <viv> section4 </viv> </viv>
يتم تضمين جميع المحتوى في DIV مع اسم المعرف full ، ولا يمكنك إضافة هذا إلى الجسم.
عنصر DIV مع اسم الفصل. القسم هو صفحة واحدة. يمكن التحكم في الاستبدال بين الصفحات المختلفة من خلال عجلة الماوس ولوحة المفاتيح ، ويمكن أيضًا تعيين التنقل في القائمة.
في الوقت نفسه ، إذا كنت ترغب في إنشاء تأثير أفقي على الشاشة في صفحة ما ، فيمكنك إضافة div.slide في Div.Section. الرمز كما يلي:
<viv> <viv> الشريحة 1 </viv> <viv> الشريحة 2 </viv> <viv> الشريحة 3 </viv> <viv> الشريحة 4 </div> </div>
5. تهيئة صفحة كاملة
$ (document) .Ready (function () {$ ('#fullpage'). fullPage ({.....إعداد التنقل في الشريط الجانبي
هذا التنقل متاح بشكل عام على تصميم موقع الويب. نمط التنقل الافتراضي للكامل هو نقاط سوداء صغيرة ، ويدعم أيضًا وضع أنماط أخرى.
<ul id = "mymenu"> <li data-menuanchor = "firstpage"> <a href = "#page"> القسم الأول </a> </li> <li data-menanchor = "secondpage"> <a href = "##page"> second </a> <li> القسم </a> </li> <li data-menancancor = "fourthpage"> <a href = "#fourthpage"> القسم الرابع </a> </li>
#mymenu {الموضع: ثابت ؛ ...} $ ('#fullpage'). full -page ({ancors: ['firstpage' ، 'secondpage' ، 'thirdpage' ، 'FourthPage' ، 'lastPage'] ، menu: '#mymenu'}) ؛6. مواجهة ومشاكل وحلول
بعد الانتهاء من الموقع ، وجدت أنني أدخلت للتو الصفحة وقبل تهيئة ملف FullPage.js ، تم تحميل DOM CSS ، وسيتم الضغط على جميع محتويات النمط المعروضة معًا وسيتم استعادتها بعد التحميل. إذا تم تحسين موقع الويب وكانت سرعة الإنترنت قوية للغاية ، فستكون هذه الفترة قصيرة ، لكنها ستظل تجلب تجربة مستخدم سيئة.
لذا جرب الحلول المختلفة:
1. القسم
القسم {Overflow: Hidden}
بعد الاختبار ، لا فائدة من هذه الطريقة.
2. قم بتعيين قناع فارغ ، يتم عرض القناع فقط قبل اكتمال جميع الصفحات ، ويتم إخفاء محتوى السمة ، وبعد التحميل ، تتم إزالة قناع عرض المحتوى. بالطبع ، يمكنك أيضًا إعداد محتوى متعلق بالمواقع في طبقة القناع.
توضيح طريقة التنفيذ المحددة:
<html> <Head> <meta http-equiv = "content-type" content = "text/html ؛ charset = gb2312"> <title> unded document </title> <script language = "javaScript" type = "text/javaScript"> showlcontent (status1 ، {{ document.getElementByIdx ("ShowContent"). style.display = status1 ؛ document.getElementByIdx ("Showload"). style.display = status2 ؛ } </script> </head> <body onload = 'showallContent ("" ، "none")'> <div id = "showload" style = "z-index: 2 ؛ display: block ؛ width: auto ؛ height: auto ؛ </div>
<script> showAllContent ("none" ، "") ؛ </script>
</body>
</html>
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.