实现首尾相连的Marquee效果,并且在开始时完整显示内容。而不是从左边渐渐移动出来!
有时很需要类似效果!发布出来。
<
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 ="" > 新婚夫妇如何理财 </ a > < a href ="" > 原创连载之-----70男和80女的同居理财故事 (2) </ a > < a href ="" > 魂牵梦萦人 </ a >
< a href ="" > 金融直播室 </ a > < a href ="" > 魂牵梦萦人 </ 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 >
< 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 ="" > 新婚夫妇如何理财 </ a > < a href ="" > 原创连载之-----70男和80女的同居理财故事 (2) </ a > < a href ="" > 魂牵梦萦人 </ a >
< a href ="" > 金融直播室 </ a > < a href ="" > 魂牵梦萦人 </ 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 >