この記事では、JavaScriptの一般的なコードをまとめて、画像スクロールを実装します。これにより、上、下、左、右の4つの方向にシームレスなスクロール効果を実現できます。これは、フロントエンドの設計と開発で一般的に使用される写真の特殊効果です。スクロール効果の1つのみを使用できます。
特定の例コードは次のとおりです。
< xmlns = "http://www.w3.org/1999/xhtml" lang = "zh-cn" xml：lang = "zh-cn"> <head> <title>画像スクロール</タイトル> <スクリプトタイプ= "テキスト/javascript">速度= 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.scrollleft <= 0）{demo.scrollleft+= demolllett+ else {demo.scrollleft--}} function boxbottom（）{if（demo1.offsettop-demo.scrolltop> = 0）{demo.scrolltop+= demo2.offseetheight} if（demo2.offsetwidth-demo.scrollleft <= 0）{demo.scrollleft- = demo1.offsetwidth} else {demo.scrollleft ++}} if（e == 1）{var movetop = setinterval（boxtop、速度）; demo.onmouseover = function（）{clearinterval（movetop）;} demo.onmouseout = function（）{movetop = setinterval（boxtop、speed）}} if（e == 2）{var moveright = setinterval（boxright、速度）; 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）demover = fultions = fultions（）{clear（moveleft）} demo.onmouseout = function（）{moveleft = setinterval（boxleft、speed）}} if（e == "top"）{movetop = setinterval（boxtop、speed）obj.onmouseout = function（）{clearinterval（movetop）;}} if（e = = "right = setinterval obj.onmouseout = function（）{clearinterval（moveright）;}} if（e == "bottom"）{movebottom = setinterval（boxbottom、speed）obj.onmouseout = function（）{clearinterval（movebottom）;}} if（e == "left"）{moveleft = setInterval（boxleft） obj.onmouseout = function（）{clearinterval（moveleft）;}}}}}}}} </script> <style type = "text/css"> div＃a、div＃b、div＃c、div＃d {float：left;} h2 {clear：bly; } div＃b、div＃d、div＃bb {white-space：nowrap; } </style> </head> <body> <h1>スクロールコレクション</h1> <hr/> <h2> up </h2> <h2> up </h2> <div id = "a" style = "overflow：hidden; height：100px; width：90pth; src = "/images/logo.gif2"/> <img src = "/mages/logo.gif3"/> <img src = "/logo.gif4"/> <img src = "/logo.gif5"/> <img src = "/mages/logo.gif6"/>> <img.gif. "="/logo.gif6 "/>> <img /> <img src = "/mages/logo.gif8"/> </div> <div id = "a2"> </div> </div> <script = "text/javascript"> boxmove（ "a"、 "a1"、 "a2"、1）、1）; </script> <h2> style = "overflow：hidden; height：100px; width：90px;"> <div id = "b1"> <img src = "/mages/logo.gif1"/> <img src = "/mages/logo.gif2"/> <img src = "/logo.gif4"/logo.gif4 "/logo.gif4"/logo.gif4 src = "/images/logo.gif5"/> <img src = "/mages/logo.gif5"/> <img src = "/logo.gif3"/> <img src = "/mages/logo.gif4"/> <img src = "/mages/logo.gif5"/>>> <> <> <> <> <> <> <> <> <img /> <img src = "/mages/logo.gif7"/> <img src = "/mages/logo.gif8"/> </div> <div = "b2"> </div> </div> <script = "text/javascript"> boxmove（ "b"、 "b1"、 "b2"、 "b2）; < style = "overflow：hidden; height：100px; width：90px;"> <div id = "c1"> <img src = "/image src ="/> <img src = "/images/logo.gif2"/> <img src = "/logo.gif4"/logo.gif4 "/logo. src = "/images/logo.gif5"/> <img src = "/mages/logo.gif6"/> <img src = "/migase/logo.gif7"/> <img src = "/mages/logo.gif8"/> </div> <div id = " type = "text/javascript"> boxmove（ "c"、 "c1"、 "c2"、3）; </script> <h2>左</h2> <div id = "d" style = "overflow：hidden; height; height：100px; width：90px;"> <div id = "d1" src = "/images/logo.gif2"/> <img src = "/mages/logo.gif3"/> <img src = "/logo.gif4"/> <img src = "/logo.gif5"/> <img src = "/mages/logo.gif6"/>> <img.gif. "="/logo.gif6 "/>> <img /> <img src = "/mages/logo.gif8"/> </div> <div id = "d2"> </div> </div> <script = "text/javascript"> boxmove（ "d"、 "d1"、 "d2"、4）; </script> <h2> onmouseOver = "boxmove（ 'aa'、 'aa1'、 'aa2'、 'top'、this）;"> on </strong> </h2> <div div = "aa" style = "overflow：hidden; height; height：100px; width：90px;"> <div id = "aa1” src = "/images/logo.gif2"/> <img src = "/mages/logo.gif3"/> <img src = "/logo.gif4"/> <img src = "/logo.gif5"/> <img src = "/mages/logo.gif6"/>> <img.gif. "="/logo.gif6 "/>> <img /> <img src = "/mages/logo.gif8"/> </div> <div div = "aa2"> </div> </div> <h2> scroll- <strong onmouse = "boxmove（ 'bb'、 'bb1'、 'bb2'、 'left'、this）; onmouseOver = "boxmove（ 'bb'、 'bb1'、 'bb2'、 'rist'、this）;"> right </strong> </h2> <div div = "bb" style = "overflow：hidden; height：100px; width：90px;"> <div id = "bb1" bb1 src = "/images/logo.gif2"/> <img src = "/mages/logo.gif3"/> <img src = "/logo.gif4"/> <img src = "/logo.gif5"/> <img src = "/mages/logo.gif6"/>> <img.gif. "="/logo.gif6 "/>> <img /> <img src = "/images/logo.gif8"/> </div> <div id = "bb2"> </div> </div> </body> </html>