- Js+CSS间断和不间断文本滚动代码,文字在一行高度范围内不间断滚动,还有一个是间断滚动,滚动一次后会稍停片刻再次滚动。
点击(此处)折叠或打开
-
<!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>
-
<title>石家庄自动门</title>
-
<meta http-equiv=\"content-type\" content=\"text/html;charset=gb2312\">
-
<style type=\"text/css\">
-
.box{width:150px;height:25px;line-height:25px;border:#bbb 1px solid;overflow:hidden;}
-
.box ul{margin:0;padding:0}
-
.box li{height:25px;line-height:25px;font-size:12px;text-align:center;list-style-type:none;}
-
</style>
-
</head>
-
<body>
-
<div class=\"box\" id=\"marqueebox0\">
-
<ul>
-
<li style=\"background:#f8e2ac;\">第一行</li>
-
<li style=\"background:#f5f5f5;\">第二行</li>
-
<li style=\"background:#ffe6ec;\">第三行</li>
-
</ul>
-
</div><br>
-
<div class=\"box\" id=\"marqueebox1\">
-
<ul>
-
<li style=\"background:#f8e2ac;\">第一行</li>
-
<li style=\"background:#f5f5f5;\">第二行</li>
-
<li style=\"background:#ffe6ec;\">第三行</li>
-
</ul>
-
</div>
-
<script type=\"text/javascript\">
-
function startmarquee(lh,speed,delay,index){
-
var t;
-
var p=false;
-
var o=document.getElementById(\"marqueebox\"+index);
-
o.innerHTML+=o.innerHTML;
-
o.onmouseover=function(){p=true}
-
o.onmouseout=function(){p=false}
-
o.scrollTop = 0;
-
function start(){
-
t=setInterval(scrolling,speed);
-
if(!p){ o.scrollTop += 1;}
-
}
-
function scrolling(){
-
if(o.scrollTop%lh!=0){
-
o.scrollTop += 1;
-
if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;
-
}else{
-
clearInterval(t);
-
setTimeout(start,delay);
-
}
-
}
-
setTimeout(start,delay);
-
}
-
startmarquee(25,30,3000,0);
-
startmarquee(25,40,0,1);
-
</script>
-
</body>
- </html>