Artikel ini merangkum kode umum untuk JavaScript untuk mengimplementasikan gulir gambar, yang dapat mencapai efek gulir yang mulus dalam empat arah: atas, bawah, kiri dan kanan. Ini adalah gambar efek khusus yang biasa digunakan dalam desain dan pengembangan front-end. Anda hanya dapat menggunakan salah satu efek gulir.
Kode contoh spesifik adalah sebagai berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns =" httml./http:.g13. Lang = "ZH-CN" XML: Lang = "ZH-CN"> <HEAD> <Title> gambar pengguliran Kode Kode </iteme> <script type = "text/javascript"> // boxmove fungsi gulir otomatis (d1, d2, d3, e, obj) {var speed = 30; var demo = document.geteLementById (d1); var demo1 = document.geteLementById (d2); var demo2 = document.geteLementById (d3); demo2.innerhtml = demo1.innerhtml; function boxtop () {if (demo2.offsettop-demo.scrolltop <= 0) {demo.scrolltop- = demo1.offsetheight} else {demo.scrolltop ++} function boxright () {if (demo.scrolllef <= 0) {demo.crollle <) {) {demo. else {demo.scrollleft--}} function boxbottom () {if (demo1.offsettop-demo.scrolltop> = 0) {demo.scrolltop+= demo2.offsetheight} else {demo.scrolltop--} function boxleft () {else {demo.scrolltop-- if (demo2.offsetWidth-demo.scrollleft <= 0) {demo.scrollleft- = demo1.offsetWidth} else {demo.scrollleft ++}} if (e == 1) {var movetop = setInderVal (box, kecepatan); Demo.onMouseOver = function () {clearInterval (movetop);} demo.onmouseout = function () {movetop = setInterval (boxtop, speed)}} if (e == 2) {var moveright = setInterval (boxright, speed); Demo.onMouseOver = function () {clearInterval (MeVeright)} demo.onMouseOut = function () {Moveright = setInterval (boxRight, speed)}} if (e == 3) {var movebottom = setInterval (boxbottom, speed); demo.onmouseover=function(){clearInterval(MoveBottom);} demo.onmouseout=function(){MoveBottom=setInterval(boxBottom,speed)} } if(e==4){ var MoveLeft=setInterval(boxLeft,speed) demo.onmouseover=function(){clearInterval(MoveLeft)} demo.onmouseout = function () {moveleft = setInterval (boxleft, speed)}} if (e == "top") {movetop = setInterval (boxtop, speed) obj.onmouseOut = function () {clearInterval (movetop);}} if (e == "kanan) {clearInterval (movetop);}} if (e ==" kanan) {overright = {{moveTop);} if (e == "kanan) {clearinterval (movetop);} if (e ==" kanan) {miring = {exinerVal (moveTop);}} if (e == "kanan) {movetop) {e ==" obj.onmouseout = function () {clearInterval (Moveright);}} if (e == "BOTTOM") {MOVEBOTTOM = setInterval (boxbottom, speed) Obj.onmouseout = function () {clearInterval (movebottom);} ife (e == ") {moveIntom);} if (e ==") {moveBottom); obj.onmouseout = function () {clearInterval (moveleft);}}}}}} </script> <style type = "text/css"> Div#a, div#B, div#c, div#d {float: left;} h2 {clear: keduanya; } Div#B, Div#D, Div#BB {White-Space: NowRap; } </tyle> </head> <hody> <h1> menggulir koleksi </h1> <hr/> <h2> naik </h2> <div id = "a" style = "overflow: tersembunyi; tinggi: 100px; lebar: 90px;"> <v id = "a1"> <img src = "/gambar/gambar/gambar; src = "/gambar/logo.gif2"/> <img src = "/gambar/logo.gif3"/> <img src = "/gambar/logo.gif4"/> <img src = "/gambar/logo.gif5"/> <mg src = "/gambar/gambar/logo" "/> <mg src ="/gambar/lOGo.gif6 " /> <img src = "/gambar/logo.gif8"/> </div> <div id = "a2"> </div> </div> <script type = "text/javascript"> boxmove ("a", "a1", "a2", 1); </script> <h2> kanan </h2> </h2> </a1 "," b "; style = "overflow: tersembunyi; tinggi: 100px; lebar: 90px;"> <div id = "b1"> <img src = "/gambar/logo.gif1"/> <img src = "/gambar/logo.gif2"/<img src = "/gambar/loGo.gif3"/> <"Img SRC ="/gambar/lOGo.gif3 " src = "/gambar/logo.gif5"/> <img src = "/gambar/logo.gif5"/> <img src = "/gambar/logo.gif3"/> <img src = "/gambar/logo.gif4"/> <mg src = "/gambar/gambar/logo" "/> <mg src ="/gambar/logo.gif5 " /> <img src = "/gambar/logo.gif7"/> <img src = "/gambar/logo.gif8"/> </div> <div id = "b2"> </div> </div> <script type = "text/javascript"> boxmove ("b", "b1", "b2", 2); style = "overflow: tersembunyi; tinggi: 100px; lebar: 90px;"> <div id = "c1"> <img src = "/gambar/logo.gif1"/> <img src = "/gambar/logo. src = "/gambar/logo.gif5"/> <img src = "/gambar/logo.gif6"/> <img src = "/gambar/logo.gif7"/> <img src = "/gambar/logo.gif8"/> </div> <div id = "c2"> </Div> type = "Text/JavaScript"> boxmove ("c", "c1", "c2", 3); </script> <h2> kiri </h2> <div id = "d" style = "overflow: hidden; tinggi: 100px; lebar: 90px;"> <Div id = "d1"> <mg src = " src = "/gambar/logo.gif2"/> <img src = "/gambar/logo.gif3"/> <img src = "/gambar/logo.gif4"/> <img src = "/gambar/logo.gif5"/> <mg src = "/gambar/gambar/logo" "/> <mg src ="/gambar/lOGo.gif6 " /> <img src = "/gambar/logo.gif8"/> </div> <div id = "d2"> </div> </div> <script type = "text/javascript"> boxmove ("d", "d1", "d2", 4); </script> <h2> gulir manual-manual- <"D2", 4); </script> <h2 onmouseover = "boxmove ('aa', 'aa1', 'aa2', 'top', this);"> on </strong> </h2> <div id = "aa" style = "overflow: hidden; tinggi: 100px; lebar: 90px;"> <div id = "aa1"> <img src = 90px; "> <div id =" aa1 "> <img src =" gambar = "" src = "/gambar/logo.gif2"/> <img src = "/gambar/logo.gif3"/> <img src = "/gambar/logo.gif4"/> <img src = "/gambar/logo.gif5"/> <mg src = "/gambar/gambar/logo" "/> <mg src ="/gambar/lOGo.gif6 " /> <img src = "/gambar/logo.gif8"/> </div> <div id = "aa2"> </div> </div> <h2> gulir secara manual- <strong onmouseover = "boxmove ('bb', 'bb1', 'bb2', 'kiri', this);"> Kuat </Kuat> onmouseover = "boxmove ('bb', 'bb1', 'bb2', 'right', this);"> right </strong> </h2> <div id = "bb" style = "overflow: hidden; tinggi: 100px; lebar: 90px;"> <div id = "bb1"> <IMG SRC = "gambar/" "" "BB1"> <g IMG SREPX = "" src = "/gambar/logo.gif2"/> <img src = "/gambar/logo.gif3"/> <img src = "/gambar/logo.gif4"/> <img src = "/gambar/logo.gif5"/> <mg src = "/gambar/gambar/logo" "/> <mg src ="/gambar/lOGo.gif6 " /> <img src = "/gambar/logo.gif8"/> </div> <div id = "bb2"> </div> </div> </body> </html>