不间断循环滚动效果的实例代码(必看篇)
蛮优秀的一段效果代码，可以上下左右滚动，收藏了
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<title>滚动测试</title>
<scripttype="text/javascript">
/**
*@paraobj目标对象如:demo,deml1,demo2中的"demo"可任意，只要不重复
*
*@paraspeed滚动速度越大越慢
*
*@paradirection滚动方向包括:left,right,down,up
*
*@paraobjWidth总可见区域宽度
*
*@paraobjHeight总可见区域高度
*
*@parafilePath存放滚动图片的路径(如果是自动获取文件夹里的图片滚动)
*
*@paracontentById对某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){returndocument.getElementById(id)}
//滚动
functionscrollObject(obj,speed,direction,objWidth,objHeight,filePath,contentById)
{
//执行初始化
if(direction=="up"||direction=="down")
document.write(UDStructure());
else
document.write(LRStructure());
vardemo=$(obj);
vardemo1=$(obj+"1");
vardemo2=$(obj+"2");
varspeed=speed;
$(contentById).style.display="none"
demo.style.overflow="hidden";
demo.style.width=objWidth+"px";
demo.style.height=objHeight+"px";
demo.style.margin="0auto";
if(filePath!="")
demo1.innerHTML=file();
if(contentById!="")
demo1.innerHTML=$(contentById).innerHTML;
demo2.innerHTML=demo1.innerHTML;
//左右滚动
functionLRStructure()
{
var_html="";
_html+="<divid='"+obj+"'>";
_html+="<tableborder='0'align='left'cellpadding='0'cellspacing='0'cellspace='0'>";
_html+="<tr>";
_html+="<tdnowrap='nowrap'id='"+obj+"1'>";
//此处是放要滚动的内容
_html+="</td>";
_html+="<tdnowrap='nowrap'id='"+obj+"2'></td>";
_html+="</tr>";
_html+="</table>";
_html+="</div>";
return_html;
}
//上下滚动的结构
functionUDStructure()
{
var_html="";
_html+="<divid="+obj+">";
_html+="<tableborder='0'align='left'cellpadding='0'cellspacing='0'cellspace='0'>";
_html+="<tr>";
_html+="<tdid='"+obj+"1'>";
//此处是放要滚动的内容
_html+="</td>";
_html+="</tr>";
_html+="<tr>";
_html+="<tdid='"+obj+"2'></td>";
_html+="</tr>";
_html+="</table>";
_html+="</div>";
return_html;
}
//取得文件夹下的图片
functionfile()
{
vartbsource=filePath;//本地文件夹路径
filePath=filePath.toString();
if(filePath=="")
return"";
varimgList="";
varobjFSO=newActiveXObject('Scripting.FileSystemObject');
//文件夹是否存在
if(!objFSO.FolderExists(tbsource))
{
alert("<"+tbsource+">该文件夹路径不存在，或者路径不能含文件名！");
objFSO=null;
return;
}
varobjFolder=objFSO.GetFolder(tbsource);
varcolFiles=newEnumerator(objFolder.Files);
varre_inf1=/\.jpg$/;//验证文件夹文件是否jpg文件
for(;!colFiles.atEnd();colFiles.moveNext())//读取文件夹下文件
{
varobjFile=colFiles.item();
if(re_inf1.test(objFile.Name.toLowerCase()))
{
imgList+="<imgsrc="+filePath+"/"+objFile.Name+">";
}
}
returnimgList;
}
//向左滚
functionleft()
{
if(demo2.offsetWidth-demo.scrollLeft<=0)
{
demo.scrollLeft-=demo1.offsetWidth;
}
else
{
demo.scrollLeft++;
}
}
//向右滚
functionright()
{
if(demo.scrollLeft<=0)
{
demo.scrollLeft+=demo2.offsetWidth;
}
else
{
demo.scrollLeft--
}
}
//向下滚
functiondown()
{
if(demo1.offsetTop-demo.scrollTop>=0)
{
demo.scrollTop+=demo2.offsetHeight;
}
else
{
demo.scrollTop--
}
}
//向上滚
functionup()
{
if(demo2.offsetTop-demo.scrollTop<=0)
{
demo.scrollTop-=demo1.offsetHeight;
}
else
{
demo.scrollTop++
}
}
//切换方向
functionswichDirection()
{
switch(direction)
{
case"left":
returnleft();
break;
case"right":
returnright();
break;
case"up":
returnup();
break;
default:
returndown();
}
}
//重复执行
varmyMarquee=setInterval(swichDirection,speed);
//鼠标悬停
demo.onmouseover=function(){clearInterval(myMarquee);}
//重新开始滚动
demo.onmouseout=function(){myMarquee=setInterval(swichDirection,speed);}
}
</script>
</head>
<body>
<divid="img">
<tablewidth="1000"border="0"align="center"cellpadding="5"cellspacing="0">
<tr>
<tdwidth="200"><imgsrc="http://attach.e.iciba.com/attachment/200910/22/4188617_12561994098532.jpg"alt=""width="200"height="150"/></td>
<tdwidth="200"><imgsrc="http://pica.nipic.com/2008-05-27/2008527145211519_2.jpg"alt=""width="200"height="150"/></td>
<tdwidth="200"><imgsrc="http://pic4.nipic.com/20090823/383152_215728074589_2.jpg"alt=""width="200"height="150"/></td>
<tdwidth="200"><imgsrc="http://pic8.nipic.com/20100628/4643449_170245009531_2.jpg"alt=""width="200"height="150"/></td>
<tdwidth="200"><imgsrc="http://pica.nipic.com/2008-05-30/20085309524648_2.jpg"alt=""width="200"height="150"/></td>
</tr>
</table>
</div>
<scripttype="text/javascript">
scrollObject("sr",50,"right",800,160,"","img")
</script>
</body>
</html>
以上就是小编为大家带来的不间断循环滚动效果的实例代码(必看篇)全部内容了，希望大家多多支持毛票票~