ฉันเพิ่งสร้างเว็บไซต์ของ บริษัท และเลื่อนผ่านหน้าจอเต็มหน้าจอซึ่งปรับปรุงประสบการณ์การท่องเว็บอย่างมีนัยสำคัญของเว็บไซต์ทางการ ดังนั้นขอสรุปวิธีการใช้ fullpage.js ยินดีต้อนรับเพื่อแก้ไขฉัน
1. บทนำสู่ FullPage.js
FullPage.js เป็นชุดของปลั๊กอิน JS ที่ใช้การเลื่อนแบบเต็มหน้าจอของเบราว์เซอร์ เว็บไซต์หลายแห่งใช้เพื่อให้ได้ประสบการณ์การท่องเว็บที่ดีขึ้น
ฟังก์ชั่นที่สามารถทำได้:
•สนับสนุนการควบคุมไปข้างหน้าและย้อนกลับและแป้นพิมพ์
•ฟังก์ชั่นการโทรกลับหลายรายการ
•สนับสนุนกิจกรรมสัมผัสโทรศัพท์มือถือและแท็บเล็ต
•สนับสนุนภาพเคลื่อนไหว CSS3
•สนับสนุนการซูมหน้าต่าง
•การปรับอัตโนมัติเมื่อหน้าต่างซูม
•สามารถตั้งค่าความกว้างของการเลื่อนสีพื้นหลังความเร็วเลื่อนตัวเลือกลูปการโทรกลับการจัดตำแหน่งข้อความ ฯลฯ
2. ปลั๊กอินดาวน์โหลด
npm | npm ติดตั้ง fullpage.js
Bower | Bower ติดตั้ง 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 ก่อนจากนั้นแนะนำ FullPage เมื่อฉันเริ่มเขียนการสาธิตครั้งแรกผลไม่สำเร็จเนื่องจากคำสั่งที่ไม่ถูกต้องและข้อผิดพลาดของเบราว์เซอร์ใน FullPage.js jQuery ไม่ได้กำหนด
4. เขียนรหัส HTML
<div id = "fullpage"> <div> ส่วนที่ 1 </div> <div> ส่วนที่ 2 </div> </div> ส่วนที่ 3 </div> <div> ส่วนที่ 4 </div> </div>
เนื้อหาทั้งหมดรวมอยู่ใน DIV ด้วยชื่อ ID FullPage และคุณไม่สามารถเพิ่มสิ่งนี้ลงในร่างกายได้
องค์ประกอบ DIV ที่มีชื่อคลาส. ส่วนเป็นหน้าเดียว การแทนที่ระหว่างหน้าต่างๆสามารถควบคุมได้ผ่านล้อเมาส์และแป้นพิมพ์และสามารถตั้งค่าการนำทางรายการได้
ในเวลาเดียวกันหากคุณต้องการสร้างเอฟเฟกต์หน้าจอแนวนอนในหน้าคุณสามารถเพิ่ม div.slide ใน div.section รหัสมีดังนี้:
<div> <div> สไลด์ 1 </div> <div> สไลด์ 2 </div> <div> สไลด์ 3 </div> <div> สไลด์ 4 </div> </div>
5. เริ่มต้นเต็มหน้า
$ (เอกสาร) .ready (function () {$ ('#fullPage'). fullPage ({..... // ตัวเลือกสำหรับรายละเอียดโปรดดู https://github.com/alvarotrigo/fullpage.js/});});การตั้งค่าการนำทางแถบด้านข้าง
การนำทางนี้มีอยู่ในการออกแบบเว็บไซต์ รูปแบบการนำทางเริ่มต้นของ FullPage คือจุดสีดำขนาดเล็กและยังรองรับการตั้งค่าสไตล์อื่น ๆ
<ul id = "mymenu"> <li data-menuanchor = "FirstPage"> <a href = "#firstPage"> ส่วนแรก </a> </li> <li data-menuanchor = "secondPage"> <a href = "#secondPage"> ส่วน </a> </li> <li data-menuanchor = "FourthPage"> <a href = "#fourthpage"> ส่วนที่สี่ </a> </li>
#mymenu {ตำแหน่ง: แก้ไข; ... } $ ('#fullPage'). FullPage ({anchors: ['FirstPage', 'SecondPage', 'ThirdPage', 'FourthPage', 'LastPage'], เมนู: '#MyMenu'});6. ปัญหาที่พบและการแก้ปัญหา
หลังจากเว็บไซต์เสร็จสมบูรณ์ฉันพบว่าฉันเพิ่งเข้าสู่หน้าและก่อนที่ไฟล์ fullpage.js จะเริ่มต้นแล้ว Dom CSS กำลังโหลดและเนื้อหาสไตล์ที่แสดงทั้งหมดจะถูกบีบเข้าด้วยกันและจะถูกกู้คืนหลังจากโหลด หากเว็บไซต์ได้รับการปรับให้เหมาะสมและความเร็วอินเทอร์เน็ตมีประสิทธิภาพมากช่วงเวลานี้จะสั้น แต่มันจะยังคงนำประสบการณ์การใช้งานที่ไม่ดีมาใช้
ลองใช้วิธีแก้ปัญหาต่าง ๆ :
1.div.section
ส่วน {ล้น: ซ่อน}
หลังจากการทดสอบวิธีนี้ไม่มีประโยชน์
2. ตั้งค่าหน้ากากเปล่าเฉพาะหน้ากากจะปรากฏขึ้นก่อนที่หน้าทั้งหมดจะเสร็จสมบูรณ์เนื้อหาชุดรูปแบบจะถูกซ่อนและหลังจากโหลดมาสก์แสดงเนื้อหาจะถูกลบออก แน่นอนคุณสามารถตั้งค่าเนื้อหาที่เกี่ยวข้องกับเว็บไซต์ในเลเยอร์หน้ากาก
วิธีการใช้วิธีการใช้งานเฉพาะ:
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gb2312"> <title> unt document </title> <script language = "javascript" type = "text/javascript"> ฟังก์ชั่น 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; แสดง: บล็อก; ความกว้าง: อัตโนมัติ; ความสูง: auto;"> หน้ากำลังโหลด ... </div>
<script> showallContent ("ไม่มี", ""); </script>
</body>
</html>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น