บทความนี้สรุปรหัสทั่วไปสำหรับ JavaScript เพื่อใช้การเลื่อนรูปภาพซึ่งสามารถบรรลุเอฟเฟกต์การเลื่อนที่ราบรื่นในสี่ทิศทาง: ขึ้นลงไปซ้ายและขวา นี่คือเอฟเฟกต์พิเศษของภาพที่ใช้กันทั่วไปในการออกแบบและพัฒนาส่วนหน้า คุณสามารถใช้เอฟเฟกต์การเลื่อนได้อย่างใดอย่างหนึ่ง
รหัสตัวอย่างเฉพาะมีดังนี้:
<! doctype html public "-// w3c // dtd xhtml 1.0 เข้มงวด // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn" xml: lang = "zh-cn"> <head> <title> คอลเลกชันการเลื่อนรูปภาพ ความเร็ว = 30; var demo = document.getElementById (d1); var demo1 = document.getElementById (d2); var demo2 = document.getElementById (d3); demo2.innerhtml = demo1.innerhtml; ฟังก์ชั่น boxtop () {ถ้า (demo2.offsettop-demo.scrolltop <= 0) {demo.scrolltop- = demo1.offsetheight} else {demo.scrolltop ++}} boxright () {ถ้า (demo.scrollleft <= 0) else {demo.scrollleft--}} ฟังก์ชั่น boxbottom () {ถ้า (demo1.offsettop-demo.scrolltop> = 0) {demo.scrolltop+= demo2.offsetheight} อื่น if (demo2.offsetwidth-demo.scrollleft <= 0) {demo.scrollleft- = demo1.offsetWidth} else {demo.scrollleft ++}} ถ้า (e == 1) {var movetop = setInterval (boxtop, ความเร็ว); demo.onMouseOver = function () {clearInterval (movetop);} demo.onmouseout = function () {movetop = setInterval (boxtop, ความเร็ว)}} ถ้า (e == 2) {var moveright = setInterval (boxright, ความเร็ว); demo.onMouseOver = function () {clearInterval (moveright)} demo.onmouseout = function () {moveright = setInterval (boxright, speed)}} ถ้า (e == 3) {var moveBottom = setInterval (boxbottom, ความเร็ว); demo.onMouseOver = function () {clearInterval (moveBottom);} demo.onmouseout = function () {moveBottom = setInterval (boxbottom, ความเร็ว)}} ถ้า (e == 4) {var moveleft = setInterval demo.onmouseout = function () {moveleft = setInterval (boxleft, ความเร็ว)}} ถ้า (e == "top") {movetop = setInterval (boxtop, ความเร็ว) obj.onmouseOut = function () {clearInterval (movetop); obj.onmouseout = function () {clearInterval (moveright);}} ถ้า (e == "bottom") {moveBottom = setInterval (boxbottom, ความเร็ว) obj.onmouseout = function () {clearInterval obj.onmouseout = function () {clearInterval (moveleft);}}}}}} </script> <style type = "text/css"> div#a, div#b, div#c, div#d {float: left;} h2 {ชัดเจน: ทั้งสอง; } div#b, div#d, div#bb {White-space: nowrap; } </style> </head> <body> <h1> คอลเลกชันการเลื่อน </h1> <hr/> <h2> up </h2> <div id = "a" style = "overflow: hidden; ความสูง: 100px; width: 90px;"> <div id = "A1" src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "a2"> </div> </div> <script type = "text/javascript"> boxmove ("a", "a1", "a2", 1); style = "overflow: hidden; ความสูง: 100px; ความกว้าง: 90px;"> <div id = "b1"> <img src = "/images/logo.gif1"/> <img src = "/images/logo.gif2"/> src = "/images/logo.gif5"/> <img src = "/images/logo.gif5"/> <img src = "/images/logo.gif3"/> <img src = "/logo.gif4"/> /> <img src = "/images/logo.gif7"/> <img src = "/images/logo.gif8"/> </div> <div id = "b2"> </div> </div> <script type = "JavaScript"> BoxMove ("B", "," b1 "," b2 ", 2) style = "overflow: hidden; ความสูง: 100px; ความกว้าง: 90px;"> <div id = "c1"> <img src = "/images/logo.gif1"/> <img src = "/images/logo.gif2"/> src = "/images/logo.gif5"/> <img src = "/images/logo.gif6"/> <img src = "/images/logo.gif7"/> <img src = "/logo.gif8"/> </div> type = "text/javascript"> boxmove ("c", "c1", "c2", 3); </script> <h2> ซ้าย </h2> <div id = "d" style = "overflow: hidden; ความสูง: 100px; width: 90px;"> <div id = "d1" src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "d2"> </div> </div> <script type = "text/javascript"> boxmove ("d", "d1", "d2", 4); onMouseOver = "boxmove ('aa', 'aa1', 'aa2', 'top', this);"> on </strong> </h2> </h2> <div id = "aa" style = "overflow: hidden; ความสูง: 100px; width: 90px;"> <div id = "aa1" src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "aa2"> </div> </div> <h2> เลื่อนด้วยตนเอง- <strong onmouseover = "boxmove ('bb', 'bb1', 'bb2', 'ซ้าย' onMouseOver = "boxmove ('bb', 'bb1', 'bb2', 'ขวา', สิ่งนี้);"> ขวา </strong> </h2> <div id = "bb" style = "overflow: hidden; ความสูง: 100px; width: 90px;"> <div id = "bb1" src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "bb2"> </div> </div> </body> </html>