<html>
<title>模擬Marquee實(shí)現(xiàn)首尾想連的移動(dòng)效果</title>
<head>
<style>
.col_kx { OVERFLOW: hidden; WIDTH: 700px }
</style>
</head>
<body>
<div id="header_demo" class="col_kx">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="header_demo1" nowrap>
<!--滾動(dòng)頭條-->
<a href="">seo相關(guān)知識(shí)</a> <a href="">數(shù)據(jù)庫開發(fā)原理 (2)</a> <a href="">網(wǎng)站安全</a>
<a href="">開發(fā)技巧大全</a> <a href="">IT職業(yè)經(jīng)理人</a>
<td id="header_demo2" nowrap></td>
</tr>
</table>
</div>
<script>
//滾動(dòng)頭條
//滾動(dòng)效果
var header_demo = document.getElementById("header_demo");
var header_demo1 = document.getElementById("header_demo1");
var header_demo2 = document.getElementById("header_demo2");
var speed=20; //數(shù)值越大滾動(dòng)速度越慢
header_demo2.innerHTML = header_demo1.innerHTML;
//header_demo2.offsetWidth 總寬度
//alert(header_demo2.offsetWidth +"-"+header_demo.scrollLeft);
function Marquee(){
if(header_demo2.offsetWidth-header_demo.scrollLeft<=0)
header_demo.scrollLeft-=header_demo1.offsetWidth
else{
header_demo.scrollLeft++
}
}
var MyMar = setInterval(Marquee,speed);
header_demo.onmouseover = function(){clearInterval(MyMar)}
header_demo.onmouseout = function(){MyMar = setInterval(Marquee,speed)}
</script>
</body>
</html>
聯(lián)系客服
