تلخص هذه المقالة التعليمات البرمجية المشتركة لـ JavaScript لتنفيذ التمرير للصور ، والتي يمكن أن تحقق تأثير التمرير السلس في أربعة اتجاهات: لأعلى ، أسفل ، اليسار واليمين. هذا هو تأثير خاص صورة شائعة الاستخدام في التصميم والتطوير في الواجهة الأمامية. يمكنك فقط استخدام أحد آثار التمرير.
رمز المثال المحدد هو كما يلي:
<! doctype html public "-// w3c // dtd xhtml 1.0 Strict // en" "http://www.w3 lang = "zh-cn" xml: lang = "zh-cn"> <head> <title> مجموعة رمز التمرير صورة </title> <script type = "text/javaScript"> // وظيفة التمرير التلقائي BoxMove (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 ؛ الدالة boxtop () {if (demo2.offsettop-demo.scrolltop <= 0) {demo.scrolltop- = demo1.offsetheight} آخر {demo.scrolltop ++}} boxright () {if (demo.scrollft <= 0) {demo.scroll. آخر {demo.scrollleft--}} وظيفة boxbottom () {if (demo1.offsettop-demo.scrolltop> = 0) {demo.scrolltop+= demo2.offsetheight} آخر if (demo2.offsetWidth-demo.scrollleft <= 0) {demo.scrollleft- = demo1.OffSetWidth} آخر {demo.scrollleft ++}}} if (e == 1) {var movetop = setInterval (booxtop ، 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.onmouse = demo.onmouseout = function () {moveleft = setInterval (boxLeft ، speed)}}} if (e == "top") {movetop = setInterval (boxtop ، speed) obj.onmouseout = function () {clearinterval (movetop) ؛ obj.onmouseout = function () {clearinterval (moveright) ؛}} if (e == "bottom") {movebottom = setInterval (boxbottom ، السرعة) obj.onmouseout = function () {clearinterval (movebottom) ؛}}}}}}}} obj.onmouseout = function () {clearinterval (moveleft) ؛}}}}}}} </script> <style type = "text/css"> div#a ، div#b ، div#c ، div#d {float: left ؛} h2 {clear: كلاهما ؛ } div#b ، div#d ، div#bb {white-space: nowrap ؛ } </style> </head> <body> <h1> مجموعة التمرير </h1> <hr/> <h2> Up </h2> <div id = "a" style = "overflow: hidden ؛ height: 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 = "/logo.gif6"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "a2"> </viv> </viv> <script type = "text/javaScript"> boxMove ("a" ، "A1" ، "A2" ، 1) ؛ </primt> <h2> right </h2> <div id = "b" style = "verflow: Hidden ؛ الارتفاع: 100px ؛ العرض: 90px ؛"> <div id = "b1"> <img src = "/images/logo.gif1"/> <img src = "/images/logo.gif2"/> <img src = "/logo.gif3" src = "/images/logo.gif5"/> <img src = "/images/logo.gif5"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/logo.gif5"/> /> <img src = "/images/logo.gif7"/> <img src = "/images/logo.gif8"/> </div> <div id = "b2"> </viv> </viv> <script type = "text/javascript"> boxMove ("b" ، "b1" ، 2) id = "c" style = "overflow: hidden ؛ الارتفاع: 100px ؛ العرض: 90px ؛"> <div id = "c1"> <img src = "/logo.gif1"/> <img src = "/images/logo.gif2"/> <img src = ) type = "text/javaScript"> boxMove ("c" ، "c1" ، "c2" ، 3) ؛ </script> <h2> left </h2> <div id = "d" style = "overflow: hidden ؛ height: 100px ؛ width: 90px ؛ src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> <img src = "/logo.gif6"/> ] onMouseover = "BoxMove ('aa' ، 'aa1' ، 'aa2' ، 'top' ، this) ؛"> on </strong> </h2> <div id = "aa" src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> <img src = "/logo.gif6"/> /> <img src = "/images/logo.gif8"/> </div> <div id = "aa2"> </viv> </viv> <h2> تمرير يدويًا- <stronge onMouseover = "boxmove ('bb' ، 'bb1' ، 'bb2' ، 'left' ، this) ؛ onMouseover = "BoxMove ('bb' ، 'bb1' ، 'bb2' ، 'right' ، this) ؛"> reld </strong> </h2> <div id = "bb" style = "overflow: hidden ؛ height: 100px ؛ width: 90px ؛ src = "/images/logo.gif2"/> <img src = "/images/logo.gif3"/> <img src = "/images/logo.gif4"/> <img src = "/images/logo.gif5"/> <img src = "/logo.gif6"/> /> <img src = "/images/logo.gif8"/> </viv> <div id = "bb2"> </viv> </viv> </body> </html>