关于符合WEB标准的滚动文字特效的实现方法

豆豆网   技术应用频道   2007年09月03日  【字号: 收藏本文

由于marquee标签现在用得是越来越少了,所以滚动效果的做法大多也都改用javascript来实现了,至于不明白为什么不直接用marquee标签的朋友,不妨先阅读一下这篇文章。

  第二种方法:这个更强,能自动根据内容自动进行左右滚动,解决了宽度太小造成的截取问题。

<html>
<head>
<title> 网页文本SCROLL//webjx.com </title>
<style type="text/css">
#infozone{font-size:12px;color:#aa6;overflow:hidden;width:100px;height:20px;}
#infozone div{height:20px;line-height:20px;white-space:nowrap;overflow:hidden;}
</style>
<script type="text/javascript">
var tc;
window.onload=function(){
var o=document.getElementById('infozone');hscroll(o);
window.setInterval(function(){window.clearTimeout(tc);o.firstChild.style.marginLeft='0px';scrollup(o,20,0);},10000);
}
function scrollup(o,d,c){
if(d==c){
 var t=o.firstChild.cloneNode(true);
 o.removeChild(o.firstChild);o.appendChild(t);
 t.style.marginTop=o.firstChild.style.marginTop='0px';
 hscroll(o);
}
else{
 ch=false;var s=3,c=c+s,l=(c>=d?c-d:0);
 o.firstChild.style.marginTop=-c+l+'px';
 window.setTimeout(function(){scrollup(o,d,c-l)},50);
}
}
  
function hscroll(o){
var w1=o.firstChild.offsetWidth,w2=o.offsetWidth;
if(w1<=w2)return;
tc=window.setTimeout(function(){hs(o,w1-w2,0,w1-w2)},3500);
}
  
function hs(o,d,c,p){
c++;var t=(c>0?-c:c);o.firstChild.style.marginLeft=t+'px';
if(c==d){if(d==0){tc=window.setTimeout(function(){hs(o,p,0,p)},2500);}else tc=window.setTimeout(function(){hs(o,0,-p,p)},3500);}
else tc=window.setTimeout(function(){hs(o,d,c,p)},5);
}
</script>
</head>
  
<body>
<div id="infozone"><div>温岚 - 屋顶(周杰伦 对唱版)</div><div>范玮琪 - 那些花儿</div><div>张韶涵 - 娃娃</div><div>孙楠&韩红 - 美丽的神话</div></div>
</body>
</html>

责编:豆豆技术应用

正在加载评论...