Este artigo resume o código comum para JavaScript para implementar a rolagem de imagens, que pode obter efeito de rolagem contínuo em quatro direções: para cima, para baixo, esquerda e direita. Este é um efeito especial de imagem comumente usado no design e desenvolvimento front-end. Você só pode usar um dos efeitos de rolagem.
O código de exemplo específico é o seguinte:
<! xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn" xml: lang = "zh-cn"> <head> <title> scrolling scrolling coletor </title> <script type = "text/javascript"> // scrollmating scrollMoves velocidade = 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 ++}}} função boxright () {if (Demo.Scrollleft <= 0). else {Demo.ScrollLeft--}} função boxbottom () {if (Demo1.OffsetTop-Demo.Scrolltop> = 0) {Demo.Scrolltop+= Demo2.offsetHeight} else {Demo.ScrolloTOP-}} boxleft () {) if (Demo2.OffSetWidth-Demo.ScrollLeft <= 0) {Demo.ScrollLeft- = Demo1.OffsetWidth} else {Demo.ScrollLeft ++}} se (e == 1) {var movetop = setInterval (botoxOP, velocidade); Demo.onMouseOver = function () {ClearInterval (movetop);} Demo.onMouseOut = function () {movetop = setInterval (boxtop, speed)}}} if (e == 2) {var movelight = setInterval (boxright, speed); Demo.onMouseOver = function () {ClearInterval (Moveight)} Demo.onMouseOut = function () {Moveight = 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.onMouseOut = function () {Moveleleft = setInterval (boxleft, speed)}} if (e == "top") {movetop = setInterval (boxtop, speed) obj.onmouseout = function () {clearInterval (movetop);}} se (e == "direita") {supere obj.onMouseOut = function () {ClearInterval (Moveight);}} if (e == "Bottom") {movebottom = setInterval (boxbottom, speed) obj.onmouseout = function () {clearInterval (movebottom);}} if (e == "esquerdo") {movElen) obj.onMouseOut = function () {clearInterval (movieleft);}}}}}} </script> <style type = "text/css"> div#a, div#b, div#c, div#d {float: left;} h2 {limpo: ambos; } div#b, div#d, div#bb {space branco: Nowrap; } </style> </head> <body> <h1> Scrolling Collection </h1> <hr/> <h2> up </h2> <div id id = "a" style = "Overflow: Hidden; altura: 100px; largura: 90px;"> <div = "a1"> <img sc = "/imagens/logo. src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.gif3"/> <img src = "/imaga /> <img src = "/imagens/logo.gif8"/> </div> <div id = "a2"> </div> </div> <script type = "text/javascript"> boxmove ("a" a1 "," a2 ", 1); </script> <h2> direita </h2> style = "Overflow: Hidden; Altura: 100px; largura: 90px;"> <div id = "b1"> <img src = "/imagens/logo.gif1"/> <img src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.gif 3 src = "/imagens/logo.gif5"/> <img src = "/imagens/logo.gif5"/> <img src = "/imaga /> <img src = "/imagens/logo.gif7"/> <img src = "/imagens/logo.gif8"/> </div> <div id = "b2"> </div> </div> <script type = "text/javascript"> boxmove ("b", "b1", "b2", 2); id = "c" style = "Overflow: hidden; altura: 100px; largura: 90px;"> <div id = "c1"> <img src = "/imagens/logo.gif1"/> <img src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.fonef3 "g.gf2"/> <img src = "/imags/logo.f /> <img src = "/imagens/logo.gif5"/> <img src = "/imagens/logo.gif6"/> <img src = "/imagens/logo.gif7"/> <img src = "/imagens/logo.gif8"/</div> <d id = "c2" c2 "c2"> type = "Texto/javascript"> boxmove ("c", "c1", "c2", 3); </script> <h2> esquerda </h2> <div id = "d" style = "Overflow: hidden; altura: 100px; largura: 90px;"> <div Id = "D1"> <iMG) src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.gif3"/> <img src = "/imaga /> <img src = "/imagens/logo.gif8"/> </div> <div id = "d2"> </div> </div> <script type = "text/javascript"> boxmove ("droll", "d1", "d2", 4); </script> <h2> scrol onmouseover = "boxmove ('aa', 'aa1', 'aa2', 'top', isto); src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.gif3"/> <img src = "/imaga /> <img src = "/imagens/logo.gif8"/> </div> <div id = "aa2"> </div> </div> <h2> role manualmente- <forte onmouseover = "boxmove ('bb', 'bb1', 'bb2', 'esquerda', this); onmouseover = "boxmove ('bb', 'bb1', 'bb2', 'direita', isto); src = "/imagens/logo.gif2"/> <img src = "/imagens/logo.gif3"/> <img src = "/imaga /> <img src = "/imagens/logo.gif8"/> </div> <div id = "bb2"> </div> </div> </body> </html>