<!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>
<style>
a{display:block;font-size:15px;line-height:30px;text-decoration:none;color:#333;font-family:Arial;font-size:12px;}
.core{
height:30px;
overflow:hidden;
border:1px solid red;
}
</style>
</head>
<body>
<div id="div" class="core">
<a href="http://www.css158.com/">段落一段落一段落一段落一段落一</a>
<a href="http://www.css158.com/">段落二段落二段落二段落二段落二 </a>
<a href="http://www.css158.com/">段落三段落三段落三段落三段落三</a>
<a href="http://www.css158.com/">段落四段落四段落四段落四段落四</a>
<a href="http://www.css158.com/">段落五段落五段落五段落五段落五</a>
<a href="http://www.css158.com/">段落六段落六段落六段落六段落六</a>
<a href="http://www.css158.com/">段落七段落七段落七段落七段落七 </a>
</div>
</body>
<script type="text/javascript">
var div=document.getElementById("div");
div.innerHTML+=div.innerHTML;//复制一份div
var half=div.scrollHeight/2;
var b=true;//通过该变量来判断是否运动
(function(){
var sp=div.scrollTop%30;//对div的scrollTop取模,判读什么时候停顿
var isScroll=sp&&!b;//sp如果大于零则为true否则为false.这时候isScroll始终是fasle,因为b为true,如果不这样设置isScroll的话,当isScroll大于零时就不会执行下面的代码也就不会运动了
if(!isScroll){
if(div.scrollTop==half){//如果scrollTop等于half时则将scrollTop重置为零形成无缝滚动
div.scrollTop=0;
}
div.scrollTop+=1;//自加,以便形成动画效果
}
if(div.scrollTop%30){//如果没有滚到第几条信息时
setTimeout(arguments.callee,50);
}
else{//如果刚好滚到第几条信息
setTimeout(arguments.callee,2000);
}
})();
</script>