<html> <title>模拟Marquee实现首尾想连的移动效果</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> <!--滚动头条--> <a href="">seo相关知识</a> <a href="">数据库开发原理 (2)</a> <a href="">网站安全</a> <a href="">开发技巧大全</a> <a href="">IT职业经理人</a> <td id="header_demo2" nowrap></td> </tr> </table> </div> <script>
//滚动头条 //滚动效果 var header_demo = document.getElementById("header_demo"); var header_demo1 = document.getElementById("header_demo1"); var header_demo2 = document.getElementById("header_demo2"); var speed=20; //数值越大滚动速度越慢 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>
|