การเลื่อนแบบไร้รอยต่อเป็นเอฟเฟกต์พิเศษที่มักใช้ในโครงการ นอกจากนี้ยังมีรหัสตัวอย่างมากมายบนอินเทอร์เน็ต ที่นี่ฉันแบ่งปันรหัสที่ค่อนข้างง่ายและใช้งานได้จริงกับความเข้ากันได้ดีกับคุณ โปรดศึกษาอย่างรอบคอบ
รหัส HTML:
การคัดลอกรหัสมีดังนี้:
<</span> html>
<</span> head lang = "en">
<</span> meta charset = "utf-8">
<</span> ชื่อเรื่อง> Seamless Scroll </</span> ชื่อเรื่อง>
<</span> สคริปต์ src = "js/0010.js"> </</span> สคริปต์>
<</span> link rel = "stylesheet" type = "text/css" href = "css/0010.css"/>
</</span> หัว>
<</span> ร่างกาย>
<</span> a href = "javascript:"> เดินซ้าย </</span> a>
<</span> a href = "JavaScript:"> เดินขวา </</span> a>
<</span> div id = "div1">
<</span> ul>
<</span> li> <</span> img src = "image/1.jpg"> </</span> li>
<</span> li> <</span> img src = "image/2.jpg"> </</</span> li>
<</span> li> <</span> img src = "image/3.jpg"> </</</span> li>
<</span> li> <</span> img src = "image/4.jpg"> </</</span> li>
</</span> ul>
</</span> div>
</</span> ร่างกาย>
</</span> html>
รหัส CSS
การคัดลอกรหัสมีดังนี้:
-
มาร์จิ้น: 0;
Padding: 0;
-
#div1 {
ล้น: ซ่อน;
ความเป็นมา: สีน้ำเงิน;
ตำแหน่ง: ญาติ;
ความกว้าง: 600px;
ความสูง: 150px;
มาร์จิ้น: 100px auto;
-
#div1 ul {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 0px;
ด้านบน: 0px;
รายการสไตล์: ไม่มี;
-
#div1 ul li {
ลอย: ซ้าย;
-
#div1 ul li img {
ความกว้าง: 150px;
ความสูง: 150px;
-
JS: รหัส
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
var odiv = document.getElementById ('div1');
var oul = odiv.getElementsByTagname ('ul') [0];
var Ali = oul.getElementsByTagname ('li');
ตัวจับเวลา var = null;
var speed = 2; // ควบคุมความเร็วและทิศทางการเลื่อน
OUL.InnerHtml = OUL.InnerHtml+OUl.InnerHtml;
oul.style.width = Ali [0] .OffSetWidth*Ali.Length+'Px';
timer = setInterval (ย้าย, 30);
odiv.onmouseover = function () {// mouse ใน tentative
ClearInterval (ตัวจับเวลา);
-
odiv.onmouseout = function () {// เมาส์ออกและเลื่อนไปต่อ
timer = setInterval (ย้าย, 30);
-
document.getElementByTagname ('a') [0] .onclick = function () {
ความเร็ว = -2;
-
document.getElementByTagname ('a') [1] .onclick = function () {
ความเร็ว = 2;
-
ฟังก์ชั่นย้าย () {// การเลื่อนรูปภาพ
if (oul.offsetleft <-oul.offsetWidth/2) {
oul.style.left = 0;
-
if (oul.offsetleft> 0) {
oul.style.left = -oul.offsetWidth/2+'px';
-
OUL.STYLE.LEFT = OUL.OffSetLeft+Speed+'PX';
-
-
เอฟเฟกต์ไม่ดีมากเหรอ?