Cet article résume le code commun pour JavaScript pour implémenter le défilement d'image, qui peut réaliser l'effet de défilement transparent dans quatre directions: UP, Down, gauche et droite. Il s'agit d'un effet spécial d'image couramment utilisé dans la conception et le développement frontaux. Vous ne pouvez utiliser que l'un des effets de défilement.
L'exemple de code spécifique est le suivant:
<! Doctype html public "- // w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"><html xmlns = "http://www.w3.org/1999/xhtml" Lang = "Zh-Cn" Xml: Lang = "Zh-Cn"> <A-Head> <Title> Image Code Collection </ Title> <Script Type = "Text / Javascrip vitesse = 30; Var Demo = document.getElementById (D1); var Demo1 = document.getElementById (d2); var Demo2 = document.getElementById (D3); Demo2.InnerHtml = Demo1.InnerHtml; fonction boxtop () {if (demo2.offsettop-demo.scrolltop <= 0) {Demo.ScrollTop- = Demo1.offsetheight} else {Demo.scrolltop ++}} function boxRight () {if (Demo.scrolllleft <= 0) {DeMo.scrollft + = Demo2. else {Demo.Scrollleft--}} fonction boxBottom () {if (Demo1.offsettop-demo.scrolltop> = 0) {Demo.ScrollTop + = Demo2.OffSetheight} else {Demo.ScrollTop-- if (demo2.offsetwidth-demo.scrollleft <= 0) {Demo.Scrollleft- = Demo1.offsetWidth} else {Demo.scrollleft ++}} if (e == 1) {var movetop = setInterval (boxtop, speed); Demo.OnmouseOver = function () {ClearInterval (moveTop);} Demo.OnMouseOut = function () {MoveTop = setInterval (boxtop, speed)}} if (e == 2) {var moveright = setInterval (boxRight, Speed); Demo.OnMouseOver = function () {ClearInterval (moveright)} 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 () {moweleft = setInterval (boxleft, speed)}} if (e == "top") {MoveTop = setInterval (boxtop, speed) obj.onmouseout = function () {clearInterval (mowetop);}} if (e == "droite") {moveright = setterval (boxRight, speed) obj.onmouseout = function () {ClearInterval (moVeight);}} if (e == "bottom") {movebottom = setInterval (boxBottom, speed) obj.onmouseout = function () {ClearInterval (movebottom);}} if (e == "gauche") {moveleft = setInterval (boxleft, speed) obj.onmouseout = function () {ClearInterval (moweleft);}}}}}} </ script> <style type = "text / css"> div # a, div # b, div # c, div # d {float: left;} h2 {clairement: les deux; } div # b, div # d, div # bb {blanc-espace: nowrap; } </ style> </ head> <body> <h1> Collection de défilement </h1> <hr /> <h2> up </h2> <div id = "a" style = "overflow: Hidden; height: 100px; width: 90px;"> <div id = "a1"> <img src = "/ images / logo.gif1" /> <img src = "/ images / logo.gif2" /> <img src = "/ images / logo.gif3" /> <img src = "/ images / logo.gif4" /> <img src = "/ images / logo.gif5" /> <img src = "/ images / lOgo.gif6" /> <img src = " /> <img src = "/ images / logo.gif8" /> </ div> <div id = "a2"> </ div> </div> <script type = "text / javascript"> boxmove ("a", "a1", "a2", 1); </ script> <h2> droit </h2> <div id = "b" style = "overflow: caché; hauteur: 100px; width: 90px;"> <div id = "b1"> <img src = "/ images / logo.gif1" /> <img src = "/ images / logo.gif2" /> <img src = "/ images / lOgo.gif3" /> <img src = "/ images / lOgo.gif3" /> <img src = " src = "/ images / logo.gif5" /> <img src = "/ images / logo.gif5" /> <img src = "/ images / logo.gif3" /> <img src = "/ images / logo.gif4" /> <img src = "/ images / lOgo.gif5" /> <img src = " /> <img src = "/ images / logo.gif7" /> <img src = "/ images / logo.gif8" /> </ div> <div id = "b2"> </ div> </ div> <script type = "text / javascript"> boxmove ("b", "b1", "b2", 2); </cript> style = "Overflow: Hidden; hauteur: 100px; width: 90px;"> <div id = "c1"> <img src = "/ images / logo.gif1" /> <img src = "/ images / logo.gif2" /> <img src = "/ images / lOgo.gif3" /> <img src = "/ images / lOgo.gif3" /> <img src = " src = "/ images / logo.gif5" /> <img src = "/ images / logo.gif6" /> <img src = "/ images / logo.gif7" /> <img src = "/ images / logo.gif8" /> </ div> <div id = "c2"> </ div> </v> <script type = "text / javascript"> boxmove ("c", "c1", "c2", 3); </script> <h2> gauche </h2> <div id = "d" style = "overflow: Hidden; height: 100px; width: 90px;"> <div id = "d1"> <img src = "/ images / golf src = "/ images / logo.gif2" /> <img src = "/ images / logo.gif3" /> <img src = "/ images / logo.gif4" /> <img src = "/ images / logo.gif5" /> <img src = "/ images / lOgo.gif6" /> <img src = " /> <img src = "/ images / logo.gif8" /> </ div> <div id = "d2"> </ div> </div> <script type = "Text / javascrip onMouseover = "Boxmove ('aa', 'aa1', 'aa2', 'top', this);"> on </strong> </h2> <div id = "aa" style = "overflow: caché; height: 100px; width: 90px;"> <div id = "aa1"> <img src = "/ images / logo.gif1" src = "/ images / logo.gif2" /> <img src = "/ images / logo.gif3" /> <img src = "/ images / logo.gif4" /> <img src = "/ images / logo.gif5" /> <img src = "/ images / lOgo.gif6" /> <img src = " /> <img src = "/ images / logo.gif8" /> </ div> <div id = "aa2"> </div> </div> <h2> Scroll manuellement- <Strong OnMouseOver = "BoxMove ('BB', 'BB1', 'BB2', 'Left', this);"> gauche </strong> <Strong onMouseover = "Boxmove ('BB', 'BB1', 'BB2', 'RORG', this);"> droit </strong> </h2> <div id = "bb" style = "Overflow: Hidden; Height: 100px; width: 90px;"> <div id = "bb1"> <img src = "/ images / logo.gif1" src = "/ images / logo.gif2" /> <img src = "/ images / logo.gif3" /> <img src = "/ images / logo.gif4" /> <img src = "/ images / logo.gif5" /> <img src = "/ images / lOgo.gif6" /> <img src = " /> <img src = "/ images / logo.gif8" /> </ div> <div id = "bb2"> </ div> </div> </ body> </html>