蠻優秀的一段效果代碼,可以上下左右滾動,收藏了!!
<!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>