您的位置:首页 > Web前端 > JavaScript

[js脚本实现]图片向上滚动并且有停顿的特效

2009-11-25 17:19 881 查看
[js脚本实现]图片向上滚动并且有停顿的特效

<!-- 把下列代码放到<body>中-->
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="500" border="0" cellspacing="0" align="center">
<tr><td>
<div id="article1" style="width:500;">
<!-- 设置一个DIV容纳图片宽度为设置为图片宽度-->
<!-- 使用表格容纳图片内容-->
<TABLE cellSpacing="0" cellPadding="0" width="500" border="0">
<tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/geren.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/action.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash1.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/aplet.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/flash.jpg width=500 height=80 border=0></a></td>
</tr><tr><td height=80 align=center><a href=http://www.webjx.com target=_blank><img src=http://www.webjx.com/upfiles/specials/net.jpg width=500 height=80 border=0></a></td>
</tr> </TABLE>
</div>
<div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>
</td></tr>
</table>

<script>
articleHeight=80; //设置为图片高度
stopscrolla=false;
article1.scrollTop=0;
with(article1){
style.width=0;
style.height=articleHeight;
style.overflowX="visible";
style.overflowY="hidden";
noWrap=true;
onmouseover=new Function("stopscrolla=true");
onmouseout=new Function("stopscrolla=false");
}

preTopa=0; currentTopa=0; stoptimea=0;

function init_srolltext1(){
article2.innerHTML="";
article2.innerHTML+=article1.innerHTML;
article1.innerHTML=article2.innerHTML+article2.innerHTML;
setInterval("scrollUp1()",1); //图片滚动速度
}
function scrollUp1(){
if(stopscrolla==true) return;
currentTopa+=1;
if(currentTopa==81)//设置为图片高度稍大一些,防止出现多次滚动后留边
{
stoptimea+=1;
currentTopa-=1;
if(stoptimea==200) //暂停时间
{
currentTopa=0;
stoptimea=0;
}
}
else {
preTopa=article1.scrollTop;
article1.scrollTop+=1;
if(preTopa==article1.scrollTop){
article1.scrollTop=article2.offsetHeight-articleHeight;
article1.scrollTop+=1;
}
}

}
init_srolltext1();
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: