记得去年的时候吧，CSDN有一篇名为 最简单的无缝滚动程序,只需要五行代码 贴子，引起了很旺的讨论！
而当时就试着用这样的原理来实现流畅的滚动，在CSDN发了篇名为 修改本版中五行代码实现无逢滚动代码，10行代码左右，实现流畅滚动！的贴子，但是那段代码始终没解决流畅问题。原因就是用了scolltop属性始终有个刷新问题，从而出现闪烁，还有就是行高设置不能很好的控制。
现在改为用margin属性实现滚动，20行javascript可以搞定页面中所有设计到的滚动！！
演示：attachment/1181020134_0.html
代码如下：
而当时就试着用这样的原理来实现流畅的滚动，在CSDN发了篇名为 修改本版中五行代码实现无逢滚动代码，10行代码左右，实现流畅滚动！的贴子，但是那段代码始终没解决流畅问题。原因就是用了scolltop属性始终有个刷新问题，从而出现闪烁，还有就是行高设置不能很好的控制。
现在改为用margin属性实现滚动，20行javascript可以搞定页面中所有设计到的滚动！！
演示：attachment/1181020134_0.html
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
</head>
<body>
<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
<div id="div2" style="margin-top:0px;line-height:20px;">
<a href="javascript:">1,你可曾有过无数的梦想，</a>
<a href="javascript:">2,却在时光的流逝里幻灭 </a>
<a href="javascript:">3,你可曾对未来期待憧憬，</a>
<a href="javascript:">4,却在成长的岁月中迷失</a>
<a href="javascript:">5,CSDN中国程序员论坛</a>
<a href="javascript:">6,大家一起来</a>
<a href="javascript:">7,好象都很不错的样子</a>
</div>
</div>
<script>
function scrolln(id,samont,step){
var d=document.getElementById(id);
if(!d.scrolln){
if(step){d.step=step;d.samont=samont;}
d.scrolln=setInterval("scrolln('"+id+"')",d.samont);
d.onmouseover=function(){clearInterval(this.scrolln);this.scrolln=null;}
d.onmouseout=function(){scrolln(this.id)}
}
var top=parseInt(d.style.marginTop);
var lineheight=parseInt(d.style.lineHeight);
if(top>-lineheight){
d.style.marginTop=(top-d.step)+"px";}
else{
do{
var o=d.firstChild;
d.removeChild(o);
d.appendChild(o);
}while(!d.firstChild.tagName)
d.style.marginTop="0px";
}
}
//第一个参数为要滚动块的标签id,第二个参数为滚动间隔时间，第三个参数为滚动距离px
scrolln("div2",100,2);
</script>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝滚动</title>
</head>
<body>
<style>a{display:block;font-size:15px};</style>
<div id="div1" style="width:300px;height:68px;overflow:hidden">
<div id="div2" style="margin-top:0px;line-height:20px;">
<a href="javascript:">1,你可曾有过无数的梦想，</a>
<a href="javascript:">2,却在时光的流逝里幻灭 </a>
<a href="javascript:">3,你可曾对未来期待憧憬，</a>
<a href="javascript:">4,却在成长的岁月中迷失</a>
<a href="javascript:">5,CSDN中国程序员论坛</a>
<a href="javascript:">6,大家一起来</a>
<a href="javascript:">7,好象都很不错的样子</a>
</div>
</div>
<script>
function scrolln(id,samont,step){
var d=document.getElementById(id);
if(!d.scrolln){
if(step){d.step=step;d.samont=samont;}
d.scrolln=setInterval("scrolln('"+id+"')",d.samont);
d.onmouseover=function(){clearInterval(this.scrolln);this.scrolln=null;}
d.onmouseout=function(){scrolln(this.id)}
}
var top=parseInt(d.style.marginTop);
var lineheight=parseInt(d.style.lineHeight);
if(top>-lineheight){
d.style.marginTop=(top-d.step)+"px";}
else{
do{
var o=d.firstChild;
d.removeChild(o);
d.appendChild(o);
}while(!d.firstChild.tagName)
d.style.marginTop="0px";
}
}
//第一个参数为要滚动块的标签id,第二个参数为滚动间隔时间，第三个参数为滚动距离px
scrolln("div2",100,2);
</script>
</body>
</html>
