当前位置: 代码迷 >> JavaScript >> 运用JavaScript实现marquee功能
  详细解决方案

运用JavaScript实现marquee功能

热度:260   发布时间:2012-11-19 10:18:51.0
使用JavaScript实现marquee功能
Code:(for IE)

<body onLoad="scroll1()">
<script language=javascript>
var info = "abcdefg";
var seq1 = 0;
var seq2 = 0;
var space = 0;
var timeid = 0;
var timefunc = "scroll1()";

function scroll1() {
if(seq1 < info.length) {
seq1 += 1;
marquee1.innerText = info.substring(0,seq1);
timeid = setTimeout("scroll1()",200);
timefunc = "scroll1()";
} else {
seq1 = 0;
timeid = setTimeout("scroll2()",200);
timefunc = "scroll2()";
}
}

function scroll2() {
//alert("" + marquee1.offsetWidth + " " + div1.clientWidth);
if(marquee1.offsetWidth < div1.clientWidth) {
space += 1;
var strSpace = "";
for(var i=0; i<space; ++i) {
strSpace += " ";
}
marquee1.innerText = info + strSpace;
timeid = setTimeout("scroll2()",200);
timefunc = "scroll2()";
} else {
div1.style.textAlign = "left";
space = 0;
timeid = setTimeout("scroll3()",200);
timefunc = "scroll3()";
}
}

function scroll3() {
if(seq2 < info.length) {
seq2 += 1;
marquee1.innerText = info.substring(seq2,info.length);
timeid = setTimeout("scroll3()",200);
timefunc = "scroll3()";
} else {
div1.style.textAlign = "right";
seq2 = 0;
timeid = setTimeout("scroll1()",200);
timefunc = "scroll1()";
}
}

</script>
<div id=div1 style="POSITION:static; WIDTH:500px; TEXT-ALIGN:right">
<span id=marquee1 onMouseOver="clearTimeOut(timeid)"
  onMouseOut="setTimeout(timefunc,200)">
</span>
</div>

</body>
  相关解决方案