บทความนี้อธิบายถึงการใช้งานอย่างง่าย ๆ ของเอฟเฟกต์การเลื่อนที่ไร้รอยต่อของ JS แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
<! doctype html> <title> JavaScript Seamless Scroll < /title> <meta charset = "utf-8" /> <meta name = "keywords" content = "JavaScript Seamless scroll" /> <meta name = "คำอธิบาย" "Microsoft Yahei", Kaiti_GB2312, Simsun} #Marquee {ตำแหน่ง: ญาติ; ความกว้าง: 400px; ล้น: ซ่อน; ชายแดน: 10px Solid #8080C0; } #marquee img {border: 0px; } #Marquee DL, #Marquee DT, #MARQUEE DD, #MARQUEE A {Float: ซ้าย; มาร์จิ้น: 0; Padding: 0; } #Marquee DL {Width: 1000%; ความสูง: 150px; } </style> <script type = "text/javascript"> var marquee = function (id) {ลอง {document.execommand ("backgroundimageCache", false, true); } catch (e) {}; var container = document.getElementById (id), original = container.getElementsByTagname ("dt") [0], clone = container.getElementsByTagname ("DD") [0], speed = อาร์กิวเมนต์ [1] || 10; clone.innerhtml = Original.innerhtml; container.scrollleft = clone.offsetleft var rolling = function () {ถ้า (container.scrollleft == 0) {container.scrollleft = clone.offsetleft; } else {container.scrollleft--; }} var timer = setInterval (การหมุน, ความเร็ว) // ตั้งค่า container.onMouseOver = function () {clearInterval (ตัวจับเวลา)} // เมื่อเมาส์เคลื่อนที่ไปที่ Marquee ให้ล้างตัวจับเวลาและหยุดการเลื่อนคอนเทนเนอร์ function () {Marquee ("Marquee");} </script> <h1> JavaScript Seamless Scroll (เลื่อนไปทางขวา) </h1> <div id = "Marquee"> <dl> <dt> <a href = "###"> <img src = "img/o_s017.jpg href = "###"> <img src = "img/o_s018.jpg"/> </a> <a href = "###"> <img src = "img/o_s018.jpg"/> </a> <a href = "###" <a href = "###"> <img src = "img/o_s020.jpg"/> </a> <a href = "###"> <img src = "img/o_s021.jpg"/> </a> src = "img/o_s022.jpg"/> </a> <a href = "###"> <img src = "img/o_s022.jpg"/> </a> <a href = "###"> href = "###"> <img src = "img/o_s023.jpg"/> </a> </dt> <dd> </dd> </dl> </div>การเรนเดอร์มีดังนี้:
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน