实现首尾相连的Marquee效果,并且在开始时完整显示内容。而不是从左边渐渐移动出来!
有时很需要类似效果!发布出来。 Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--><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"> |
<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>