haixiu

อย่าอายล่ะ?

วิธีใช้

? วิธีที่ 1

เข้าถึงโดยตรง: https://iuroc.github.io/haixiu/

? วิธีที่ 2

แยกโครงการนี้ จากนั้นใช้ Github Pages เพื่อปรับใช้ไดเร็กทอรี /docs

คุณสมบัติของโครงการ

1. เว็บไซต์แบบคงที่อย่างแท้จริง สามารถปรับใช้ได้โดยตรงโดยใช้ Github Pages
2. รองรับการเพจข้อมูลและการแสดงด้วยแท็ก และรองรับการเลื่อนไปด้านล่างเพื่อเพิ่มเนื้อหาหน้าถัดไปโดยอัตโนมัติ
3. ใช้โปรแกรมดูรูปภาพคุณภาพสูงโดยใช้ PhotoSwipe
4. เมื่อโปรแกรมดูรูปภาพสลับรูปภาพ รายการภาพขนาดย่อจะเลื่อนและติดตามไปทุกที่ที่คุณเห็น
5. เมื่อโปรแกรมดูรูปภาพมาถึงภาพสุดท้าย ข้อมูลหน้าถัดไปจะถูกเพิ่มโดยอัตโนมัติโดยไม่รบกวนการเรียกดู
6. ตาม Location Hash การใช้งานจะรองรับ history.back() เพื่อปิดโปรแกรมดูรูปภาพและเข้ากันได้กับปุ่มย้อนกลับบนมือถือ
7. ใช้งานตาม Location Hash เพื่อรองรับ history.forward() เพื่อเปิดโปรแกรมดูรูปภาพและกู้คืนตำแหน่งสุดท้ายโดยอัตโนมัติ
8. เมื่อปิดโปรแกรมดูรูปภาพผ่าน Hash ระบบจะรองรับการขัดจังหวะแอนิเมชั่นซึ่งเป็นประสบการณ์ที่ยอดเยี่ยม
9. บันทึกตำแหน่งของแถบเลื่อนโดยอัตโนมัติและกำจัดผลกระทบของเหตุการณ์ HashChange บนแถบเลื่อน

เทคโนโลยีที่เกี่ยวข้อง

1. การใช้โปรแกรมรวบรวมข้อมูล Node.js Fetch API
2. หลังจากรวบรวมข้อมูลแล้ว หน้าต่างๆ จะถูกจัดเก็บไว้ในไฟล์ JSON หลายไฟล์ โดยมีหมายเลขหน้าและข้อมูลแท็กทำเครื่องหมายไว้ในชื่อไฟล์
3. ส่วนหน้าใช้เฟรมเวิร์ก Van.js เพื่อสร้าง UI ที่ตอบสนอง
4. ส่วนหน้าขอไฟล์ JSON แบบคงที่โดยตรงผ่านการ Fetch เพื่อดำเนินการคำขอเพจ
5. ใช้งานโปรแกรมดูรูปภาพโดยใช้ไลบรารี PhotoSwipe

การอัปเดตทรัพยากร

โปรดตรวจสอบเอกสารนี้: Image Collection Program README