ในบทความนี้เราตระหนักถึงผลกระทบของการเลื่อนโฆษณาในโหมด 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 ("สาธิต"); var tab1 = document.getElementById ("demo1"); var tab2 = document.getElementById ("demo2"); tab2.innerhtml = tab1.innerhtml; ฟังก์ชั่น Marquee () {if (tab2.offsetWidth-tab.scrollleft == 0) tab.scrollleft- = tab1.offsetWidth Else {tab.scrollleft ++; }} var mymar = setInterval (Marquee, ความเร็ว); tab.onMouseOver = function () {clearInterval (mymar)}; tab.onmouseout = function () {mymar = setInterval (marquee, speed)}; </script>สิ่งที่ควรทราบที่นี่คือ:
Scrollleft แสดงถึงความกว้างของหน้าเว็บที่ซ่อนอยู่ทางด้านซ้ายของแถบเลื่อนเมื่อหน้าใช้แถบเลื่อนเพื่อเลื่อนไปทางขวา
OffsetWidth เป็นความกว้างที่มองเห็นได้ของวัตถุซึ่งห่อแถบเลื่อนและเท่ากับขอบซึ่งจะเปลี่ยนไปตามขนาดการแสดงผลของหน้าต่าง
เมธอด setInterval () สามารถเรียกใช้ฟังก์ชันหรือคำนวณนิพจน์ตามระยะเวลาที่ระบุ (เป็นมิลลิวินาที) เมธอด setInterval () จะเรียกใช้ฟังก์ชันต่อไปจนกว่าจะเรียกว่า clearInterval () หรือปิดหน้าต่าง
เป็นเรื่องง่ายที่จะเข้าใจหากคุณเข้าใจการใช้งานเฉพาะนี้
หลักการการใช้งานมีดังนี้: สำเนาสำเนาของเนื้อหาที่ต้องเลื่อนครั้งแรก เมื่อเนื้อหาที่แสดงโดย div ทางด้านขวามีความกว้างเท่ากันกับเนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายเนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายของคอนเทนเนอร์พาเรนต์จะปรากฏขึ้นเพื่อให้เนื้อหาที่ซ่อนอยู่บนเงาด้านซ้ายจะปรากฏขึ้นและเนื้อหาที่ซ่อนอยู่ทางด้านขวาจะถูกนำกลับมาใช้ใหม่ หากเนื้อหาทางด้านขวาแสดงน้อยกว่าเนื้อหาที่ซ่อนอยู่ทางด้านซ้ายให้พูดคุยเกี่ยวกับคอนเทนเนอร์หลักที่ต้องการย้ายไปทางซ้ายเพื่อตระหนักถึงเงาที่ซ่อนอยู่ สิ่งหนึ่งที่ควรทราบคือเนื่องจากมีภาพสองภาพอยู่ทางด้านซ้ายในเวลาเดียวกันเมื่อด้านขวาปรากฏขึ้นครึ่งหนึ่งเงาที่ซ่อนอยู่ทางด้านซ้ายจะปรากฏขึ้นอย่างเต็มที่ เนื่องจากเนื้อหาที่แสดงทางด้านขวานั้นเหมือนกับเนื้อหาทางด้านซ้ายผลของการเลื่อนลูปจึงทำได้
การเลื่อนที่ราบรื่นนี้ทำได้
รหัสข้างต้นสำหรับการใช้เอฟเฟกต์การเลื่อนที่ราบรื่นและราบรื่นเป็นเนื้อหาทั้งหมดที่ฉันได้แบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น