当前位置:网站主页>网站技术资料>javascript>文章内容

javascript实现连续向上滚动效果

<div id="marquees">
  <a href="javascript:">1.你可曾有过无数的梦想,</a><br>
  <br>
  <a href="javascript:">2.却在时光的流逝里幻灭 .</a><br>
  <br>
  <a href="javascript:">3.你可曾对未来期待憧憬,</a><br>
  <br>
  <a href="javascript:">4.却在成长的岁月中迷失.</a><br>
  <br>
</div>
<script language="JavaScript">

marqueesHeight=140;
stopscroll=false;

with(marquees){
  style.width=0;
  style.height=marqueesHeight;
  style.overflowX="visible";
  style.overflowY="hidden";
  noWrap=true;
  onmouseover=new Function("stopscroll=true");
  onmouseout=new Function("stopscroll=false");
}
document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');

preTop=0; currentTop=0;

function init(){
  templayer.innerHTML="";
  while(templayer.offsetHeight<marqueesHeight){
    templayer.innerHTML+=marquees.innerHTML;
  }
  marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
  setInterval("scrollUp()",30);//越大越慢
}
document.body.onload=init;

function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  //scrolldelay:500
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
    //scrolldelay:500;
  }
}
</script>

  • 快速服务服务:网站策划 | 网站建设 | 北京网站建设 | 网站推广 | 网罗SEO
  • 联系网罗: 咨询电话:010-89630319 Mail:admin#wonlu.com Msn:刘先生 QQ:26402294
  •   2006-2008 Wonlu.com 北京网罗无限-京ICP备06036090号 网罗SEO