<!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=gb2312">
<title>文字滚动，JS无缝循环代码</title>
<style type="text/css">
#block2{height:23px;width:500px;border:#ccc 1px solid;font-size:12px;text-align:center;}
#block2 ul{list-style:outside none none;height:17px;padding:3px 0;overflow:hidden;margin:0;}
#block2 ul li{float:left;display:inline;margin:2px 0;height:14px;width:24.9%;}
#block2 ul li a{text-decoration:none;}
</style>
</head>
<body>
<div style="overflow-y:hidden" id="maq">
<p>这是第一段文字</p>
<p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p><p>这是第一段文字</p> </div>
<script type="text/javascript">
marque("100%","280px","icefable1","box1left")
var scrollElem;
var stopscroll;
var stoptime;
var preTop;
var leftElem;
var currentTop;
var marqueesHeight;
function marque(width,height,marqueName,marqueCName){
try{
marqueesHeight = height;
stopscroll = false;
scrollElem = document.getElementById("maq");
with(scrollElem){
style.width = width;
style.height = marqueesHeight;
style.overflow = 'hidden';
}
scrollElem.onmouseover = new Function('stopscroll = true');
scrollElem.onmouseout = new Function('stopscroll = false');
preTop = 0;
currentTop = 0;
stoptime = 0;
leftElem = document.getElementById("maq");
scrollElem.appendChild(leftElem.cloneNode(true));
init_srolltext();
}catch(e) {}
}
function init_srolltext(){
scrollElem.scrollTop = 0;
setInterval('scrollUp()', 100);
}
function scrollUp(){
if(stopscroll) return;
currentTop += 1;
if(currentTop == marqueesHeight+1) {
stoptime += 1;
currentTop -= 1;
if(stoptime == (marqueesHeight)*1) {
currentTop = 0;
stoptime = 0;
}
}else{
preTop = scrollElem.scrollTop;
scrollElem.scrollTop += 1;
if(preTop == scrollElem.scrollTop){
scrollElem.scrollTop = marqueesHeight;
scrollElem.scrollTop += 1;
}
}
}
</script>
</body>
</html>
文章来自深蓝互联http://www.szdbi.com/WEBkaifajishu/2014-10-15/27.html转载请注明出处！
上一篇：用CSS实现文字环绕图片的效果
