A very excellent piece of effect code, you can scroll up and down, left and right, and you have collected it! !
<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"/><title>Scrolling test</title><script type="text/javascript">/** * @para obj The target object such as: "demo" in demo, deml1, demo2 can be arbitrarily as long as it is not repeated* * @para speed The larger the scrolling speed, the slower the * * @para direction The scrolling direction includes: left, right, down, up * * @para objWidth Total visible area width* * @para objHeight Total visible area height* * @para filePath The path to store the scrolling picture (if it is automatically obtained to scroll the picture in the folder) * * @para contentById Scroll the content with a certain id contentById This scrolling and filePath cannot coexist. Please note * * @para Usage instance scrollObject("res",50,"up",470,200,"","resource") Scroll the content under contentById(resource)* * @para Usage instance scrollObject("res",50,"up",470,200,"d://images//","") Automatically get and scroll the content under filePath(images). Currently, only ie */ var $ =function(id){return document.getElementById(id)} // scroll function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById) { // Execute initialization if(direction=="up"||direction=="down") document.write(UDStructure()); else document.write(LRStructure()); var demo = $(obj); var demo1 = $(obj+"1"); var demo2 = $(obj+"2"); var speed=speed; $(contentById).style.display="none" demo.style.overflow="hidden"; demo.style.width = objWidth+"px"; demo.style.height = objHeight+"px"; demo.style.margin ="0 auto"; if(filePath!="") demo1.innerHTML=file(); if(contentById!="") demo1.innerHTML=$(contentById).innerHTML; demo2.innerHTML=demo1.innerHTML; // Scroll left and right function LRStructure() { var _html =""; _html+="<div id='"+obj+"' >"; _html+="<table border='0' align='left' cellpadding='0' cellspace='0' cellspace='0'>"; _html+="<tr>"; _html+="<td nowrap='nowrap' id='"+obj+"1' >"; // Here is the content to be scrolled_html+="</td>"; _html+="<td nowrap='nowrap' id='"+obj+"2' ></td>"; _html+="</tr>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // Scrolling up and down structure function UDStructure() { var _html =""; _html+="<div id="+obj+" >"; _html+="<table border='0' align='left' cellpadding='0' cellspace='0'>"; _html+="<tr>"; _html+="<td id='"+obj+"1' >"; // Here is the content to be scrolled_html+="</td>"; _html+="<tr>"; _html+="<tr>"; _html+="<td id='"+obj+"1' >"; // Here is the content to be scrolled_html+="</td>"; _html+="<tr>"; _html+="<tr>"; _html+="<td id='"+obj+"2' > </td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // Get the image function file() { var tbsource = filePath;//Local folder path filePath = filePath.toString(); if (filePath=="") return""; var imgList =""; var objFSO =new ActiveXObject('Scripting.FileSystemObject'); // Whether the folder exists if(!objFSO.FolderExists(tbsource)) { alert("<"+tbsource+">The folder path does not exist, or the path cannot contain a file name!"); objFSO =null; return; } var objFolder = objFSO.GetFolder(tbsource); var colFiles =new Enumerator(objFolder.Files); var re_inf1 =//.jpg$/; //Verify whether the folder file is jpg file for (;!colFiles.atEnd();colFiles.moveNext()) //Read the file in the folder { var objFile = colFiles.item(); if(re_inf1.test(objFile.Name.toLowerCase())) { imgList +="<img src="+filePath+"/"+objFile.Name+">"; } } return imgList; } // Scroll left function left() { if(demo2.offsetWidth-demo.scrollLeft<=0) { demo.scrollLeft-=demo1.offsetWidth; } else { demo.scrollLeft++; } } // Scroll right function right() { if(demo.scrollLeft<=0) { demo.scrollLeft-=demo1.offsetWidth; } else { demo.scrollLeft++; } } // Scroll right function right() { if(demo.scrollLeft<=0) { demo.scrollLeft+=demo2.offsetWidth; } else { demo.scrollLeft-- } } // Scroll down function down() { if(demo1.offsetTop-demo.scrollTop>=0) { demo.scrollTop+=demo2.offsetHeight; } else { demo.scrollTop-- } } // Scroll up function up() { if(demo2.offsetTop-demo.scrollTop<=0) { demo.scrollTop-=demo1.offsetHeight; } else { demo.scrollTop++ } } // Switching direction function swichDirection() { switch(direction) { case"left": return left(); break; case"right": return right(); break; case"up": return up(); break; default: return down(); } } // Repeat var myMarquee=setInterval(swichDirection,speed); // Hover over demo.onmouseover=function() {clearInterval(myMarquee);} // Start scrolling again demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);} }</script></head><body><div id="img"> <table align="center" cellpadding="5" cellpacing="0"> <tr> <td><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg"/></td> <td><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg"/></td> <td><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg"/></td> <td><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg"/></td> <td><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg"/></td> </tr> </table></div><script type="text/javascript">scrollObject("sr",50,"right",800,160,"","img")</script></body></html>The above is the entire content of this article. For more information about JavaScript, you can check out: "JavaScript Reference Tutorial" and "JavaScript Code Style Guide". I also hope that everyone will support Wulin.com more.