เอฟเฟกต์การเลื่อนแบบไม่ต่อเนื่องและไร้รอยต่อ (ผลของการบันทึกด้วย GIF นั้นไม่ค่อยดีนักหากคุณสนใจคุณสามารถลงรหัสได้) เนื้อหาเฉพาะมีดังนี้
รหัส:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> seamless scroll </title> <style> *{margin: 0; padding: 0;} .box {width: 500px; ความสูง: 400px; .Block {ตำแหน่ง: สัมพัทธ์; ความกว้าง: 500px; ความสูง: 400px; overflow: hidden;} .item {ความสูง: 40px; พื้นหลัง: สีแดง; สี: #FFF; สายไฟ: 40px; text-align: center;} .item: nth-child (2n) ฟังก์ชั่น (json) {var objscroll = document.getElementById (json.id); Objscroll.scrolltop = 0; setInterval (ฟังก์ชั่น () {การเลื่อน ()}, 30); ClearInterval (Timer); window.onload = function () {// on: intermittent scroll/ความสูง scroll ไร้รอยต่อ: การเลื่อนแบบไม่ต่อเนื่อง ({on: true, id: 'block'}); Scrollup ({id: 'block2', ความสูง: 120}); } </script> </head> <body> <div> <div id = "block"> <div> 1 scroll ไร้รอยต่อ </div> <div> 2 Seamless Scroll </div> <div> 3 Seamless Scroll </div> <div> <div> 8 Seamless Scroll </div> <div> 9 Seamless Scroll </div> <div> 10 Seamless Scroll </div> <div> 11 Seamless Scroll </div> <div> 12 Seamless Scroll </div> <div> 13 Seamless Scroll </div> <div> id = "block2"> <div> 1 scroll เป็นระยะ ๆ </div> <div> 1 scroll เป็นระยะ ๆ </div> <div> 2 scroll intermittent </div> <div> 3 scroll intermittent </div> <div> 4 scroll </div> Scroll </div> <div> 8 scroll เป็นระยะ ๆ </div> <div> 9 scroll เป็นระยะ ๆ </div> <div> 10 scroll intermittent </div> <div> 11 scroll intermittent </div> <div> 12 scroll </div> <div> </div> </div> </div> </body> </html>บันทึก:
1. บล็อกกล่องควรเป็น CSS ล้นและซ่อน: ล้น: ซ่อน
2. มีสองฟังก์ชั่น: การเลื่อนการเลื่อน/การเลื่อนแบบไม่ต่อเนื่องเป็นระยะ ๆ
3. ก่อนคัดลอกชิ้นส่วนของรหัสเดียวกันและการเลื่อนอย่างราบรื่น: ตัวจับเวลาการดำเนินการยังคงเพิ่มค่า Scrolltop เมื่อค่า scrolltop มากกว่าความสูงของกล่องให้ตั้งค่า Scrolltop เป็น 0 และเริ่มต้นใหม่อีกครั้ง การเลื่อนแบบไม่ต่อเนื่องจะถูกเพิ่มบนพื้นฐานนี้ settimeout จะดำเนินการเป็นระยะ ๆ และความสูงที่ระบุจะหยุดลงเมื่อ Scrolltop มาถึง
4. คำถาม: setInterval (ฟังก์ชั่น () {การเลื่อน ()}, 30); ในรหัสสามารถดำเนินการได้โดยการเขียนด้วยวิธีนี้ setInterval ('การเลื่อน ()', 30); สิ่งนี้จะไม่ทำงาน มีคำแนะนำของอาจารย์ที่ยอดเยี่ยมหรือไม่? ความแตกต่างระหว่างทั้งสองคืออะไร? กลไกคืออะไร?
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น