ในบทความนี้เราตระหนักถึงผลกระทบของการโฆษณาในโหมด JS บริสุทธิ์สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
มาแสดงผลิตภัณฑ์สำเร็จรูปก่อน:
ก่อนอื่นสไตล์หน้าเว็บ:
#DEMO {พื้นหลัง: #FFF; ล้น: ซ่อน; เส้นขอบ: 1px ประ #CCC; ความกว้าง: 1280px; ความสูง: 200px; } #DEMO IMG {Border: 3PX SOLID #F2F2F2; } #IndEmo {Float: ซ้าย; ความกว้าง: 800%; } #demo1 {float: ซ้าย; } #demo2 {float: ซ้าย; -เค้าโครงมีดังนี้:
<div id = "demo"> <div id = "indemo"> <div id = "demo1"> <a href = "#"> <img src = "banner.jpg"/> </a> <a href = "#"> <img src = "banner2.jpg"/>
การใช้งาน JS เฉพาะ:
<script> var speed = 10; var tab = document.getElementById ("demo"); var tab1 = document.getElementById ("demo1"); var tab2 = document.getElementById ("demo2"); tab2.innerhtml = tab1.innerhtml; Marquee () {ถ้า (tab2.offsetWidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetWidTheLse {tab.scrollleft ++; }} var mymar = setInterval (marquee, speed); tab.onmouseover = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, ความเร็ว)}; </script>สิ่งที่ควรทราบที่นี่คือ:
Scrollleft แสดงถึงความกว้างของหน้าเว็บที่ซ่อนอยู่ทางด้านซ้ายของแถบเลื่อนเมื่อหน้าใช้แถบเลื่อนเพื่อเลื่อนไปทางขวา
OffsetWidth เป็นความกว้างที่มองเห็นได้ของวัตถุซึ่งห่อแถบเลื่อนและเท่ากับขอบซึ่งจะเปลี่ยนไปตามขนาดการแสดงผลของหน้าต่าง
เมธอด setInterval () สามารถเรียกฟังก์ชันหรือคำนวณการแสดงออกตามระยะเวลาที่ระบุ (เป็นมิลลิวินาที) เมธอด setInterval () จะเรียกใช้ฟังก์ชันต่อไปจนกว่าจะเรียกว่า clearInterval () หรือปิดหน้าต่าง
เป็นเรื่องง่ายที่จะเข้าใจหากคุณเข้าใจการใช้งานเฉพาะนี้
หลักการการใช้งานมีดังนี้: สำเนาสำเนาของเนื้อหาที่ต้องเลื่อนครั้งแรก เมื่อเนื้อหาที่แสดงโดย div ทางด้านขวามีความกว้างเท่ากันกับเนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายเนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายของคอนเทนเนอร์พาเรนต์จะปรากฏขึ้นเพื่อให้เนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายจะปรากฏขึ้นและเนื้อหาที่ซ่อนอยู่ทางด้านขวาจะถูกนำกลับมาใช้ใหม่ หากเนื้อหาทางด้านขวาแสดงน้อยกว่าเนื้อหาที่ซ่อนอยู่ทางด้านซ้ายให้พูดต่อว่าคอนเทนเนอร์หลักต้องการย้ายไปทางซ้ายเพื่อให้ได้การซ่อน สิ่งหนึ่งที่ควรทราบคือเนื่องจากมีภาพสองภาพอยู่ทางด้านซ้ายในเวลาเดียวกันเมื่อด้านขวาปรากฏขึ้นครึ่งหนึ่งเงาที่ซ่อนอยู่ทางด้านซ้ายจะปรากฏขึ้นอย่างเต็มที่ เนื่องจากเนื้อหาที่แสดงทางด้านขวานั้นเหมือนกับเนื้อหาทางด้านซ้ายผลของการเลื่อนลูปจึงทำได้
การเลื่อนที่ราบรื่นนี้ทำได้
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน