探索设计与体验的融合
Fusion design exploration and experience
黄埔新闻动态
News
好的黄埔网络营销公司会给客户提出建设性的意见,善于对客户进行良性引导
您的位置:>> 黄埔网站首页 >> 技术文章
黄埔文字无缝滚动的JS特效

<table width="300" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
<div id="marquees">
  <a href="javascript:">创意设计</a><br>
  <br>
  <a href="javascript:">创意设计工作室</a><br>
  <br>
  <a href="javascript:">创意设计网站设计</a><br>
  <br>
  <a href="javascript:">创意设计网站建设</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;
  }
}
</script></td>
  </tr>
</table>

相关链接>>
您对此文有什么评论?
类型: 意见建议 内容报错
网友对此文的评论:
未有评论!