不间断跑马灯,MarqueeMove
2011-01-13 16:22
1876人阅读
评论 (0)
Tags: javascript
今天弄跑马灯,感觉不连续去网上找了js,但是不能同时多个使用,需要手动改代码。然后自己手动写了这个MarqueeMove的js对象。原文地址: http://www.dotcoo.com/post-68.html
Javascript:
var MarqueeMove = function(fx, sj, s, c1, c2){
this.fx = fx;
this.sj = sj;
this.s = s;
this.c1 = c1;
this.c2 = c2;
var move = function(){
if(fx == 'left'){
if(c2.offsetLeft-s.scrollLeft<=0){
s.scrollLeft -= c1.offsetWidth;
}else{
s.scrollLeft+=2; //步长
}
}else{
if(c2.offsetTop-s.scrollTop<=0){
s.scrollTop -= c1.offsetHeight;
}else{
s.scrollTop+=2; //步长
}
}
};
c2.innerHTML=c1.innerHTML;
s.intervalid = setInterval(move, sj);
s.onmouseover=function() {clearInterval(s.intervalid);};
s.onmouseout=function() {s.intervalid = setInterval(move, sj);};
};HTML:
<div id="ms" style="width: 540px; overflow: hidden;">
<table>
<tbody>
<tr>
<td id="mc1"><table style="width: 960px;">
<tbody>
<tr>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
<td><img height="149" src="/images/movie/1.jpg" width="109" /></td>
</tr>
</tbody>
</table>
</td>
<td id="mc2"> </td>
</tr>
</tbody>
</table>
</div>使用方法
var mqm = new MarqueeMove('left', 30, ms, mc1, mc2); // 创建对象,自动开始滚动
//mqm.s.onmouseout(); //js控制停止
//mqm.s.onmouseout(); //js控制开始