蠻優秀的一段效果代碼，可以上下左右滾動，收藏了?。?/p>
<!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>滾動測試</title><script type="text/javascript">/** * @para obj 目標對象 如:demo,deml1,demo2 中的"demo" 可任意，只要不重復 * * @para speed 滾動速度 越大越慢 * * @para direction 滾動方向 包括:left,right,down,up * * @para objWidth 總可見區域寬度 * * @para objHeight 總可見區域高度 * * @para filePath 存放滾動圖片的路徑 (如果是自動獲取文件夾里的圖片滾動) * * @para contentById 對某id為contentById下的內容進行滾動 此滾動與filePath不能共存請注意 * * @para 用法實例 scrollObject("res",50,"up",470,200,"","resource") 對contentById(resource)下內容進行滾動 * * @para 用法實例 scrollObject("res",50,"up",470,200,"d://images//","") 對filePath(images)下內容自動獲取并進行滾動,目前只支持ie */ var $ =function(id){return document.getElementById(id)} // 滾動function scrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById) { // 執行初始化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; // 左右滾動function LRStructure() { var _html =""; _html+="<div id='"+obj+"' >"; _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>"; _html+="<tr>"; _html+="<td nowrap='nowrap' id='"+obj+"1' >"; // 此處是放要滾動的內容 _html+="</td>"; _html+="<td nowrap='nowrap' id='"+obj+"2' ></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // 上下滾動的結構function UDStructure() { var _html =""; _html+="<div id="+obj+" >"; _html+="<table border='0' align='left' cellpadding='0' cellspacing='0' cellspace='0'>"; _html+="<tr>"; _html+="<td id='"+obj+"1' >"; // 此處是放要滾動的內容 _html+="</td>"; _html+="</tr>"; _html+="<tr>"; _html+="<td id='"+obj+"2' ></td>"; _html+="</tr>"; _html+="</table>"; _html+="</div>"; return _html; } // 取得文件夾下的圖片function file() { var tbsource = filePath;//本地文件夾路徑 filePath = filePath.toString(); if (filePath=="") return""; var imgList =""; var objFSO =new ActiveXObject('Scripting.FileSystemObject'); // 文件夾是否存在if(!objFSO.FolderExists(tbsource)) { alert("<"+tbsource+">該文件夾路徑不存在，或者路徑不能含文件名！"); objFSO =null; return; } var objFolder = objFSO.GetFolder(tbsource); var colFiles =new Enumerator(objFolder.Files); var re_inf1 =//.jpg$/; //驗證文件夾文件是否jpg文件 for (;!colFiles.atEnd();colFiles.moveNext()) //讀取文件夾下文件 { var objFile = colFiles.item(); if(re_inf1.test(objFile.Name.toLowerCase())) { imgList +="<img src="+filePath+"/"+objFile.Name+">"; } } return imgList; } // 向左滾function left() { if(demo2.offsetWidth-demo.scrollLeft<=0) { demo.scrollLeft-=demo1.offsetWidth; } else { demo.scrollLeft++; } } // 向右滾function right() { if(demo.scrollLeft<=0) { demo.scrollLeft+=demo2.offsetWidth; } else { demo.scrollLeft-- } } // 向下滾function down() { if(demo1.offsetTop-demo.scrollTop>=0) { demo.scrollTop+=demo2.offsetHeight; } else { demo.scrollTop-- } } // 向上滾function up() { if(demo2.offsetTop-demo.scrollTop<=0) { demo.scrollTop-=demo1.offsetHeight; } else { demo.scrollTop++ } } // 切換方向function swichDirection() { switch(direction) { case"left": return left(); break; case"right": return right(); break; case"up": return up(); break; default: return down(); } } // 重復執行var myMarquee=setInterval(swichDirection,speed); // 鼠標懸停 demo.onmouseover=function() {clearInterval(myMarquee);} // 重新開始滾動 demo.onmouseout=function() { myMarquee=setInterval(swichDirection,speed);} }</script></head><body><div id="img"> <table width="1000" border="0" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="200"><img src="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg" alt="" width="200" height="150"/></td> <td width="200"><img src="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg" alt="" width="200" height="150"/></td> </tr> </table></div><script type="text/javascript">scrollObject("sr",50,"right",800,160,"","img")</script></body></html>以上就是本文的全部內容，了解更多JavaScript的語法，大家可以查看：《JavaScript 參考教程》、《JavaScript代碼風格指南》，也希望大家多多支持武林網。
新聞熱點
疑難解答
