你当前所在位置:首页 > 网站建设 > JavaScript教程 > 列表

首尾相连的滚动

作者: 时间:2008-07-28 02:11:40 来自: 【 收藏本文 点击: 评论:

<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=200;
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()",20);//越大越慢
}
document.body.onload=init;

function scrollUp(){
  if(stopscroll==true) return;
  preTop=marquees.scrollTop;
  marquees.scrollTop+=1;
  if(preTop==marquees.scrollTop){
    marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
    marquees.scrollTop+=1;
  }
}

责任编辑:adminTags:[keylink]'www.jzcss.com'[/keylink]上一篇:Javascript如何应用到网页中下一篇:JS验证表单大全 相关链接:
  • 无相关信息

用户评论: 查看全部评论

我要发表评论:
用户名:密码:验证码:匿名:

》本类推荐教程

关于我们 - 免责声明 - 版权隐私 - 广告服务 - 联系我们 - 网站地图- 友情链接 - 设为首页- 加入收藏
Copyright© 2008-2009 www.jzcss.com All Rights Reserved
备案中...