运用JavaScript实现marquee功能
日期：2014-05-16 浏览次数：20348 次
使用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>
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
