<html>
<head>
<title>JS實現跑馬燈效果</title>
<style>
* {
font-size:12px;
font-family:宋體, Arial;
} /*規定了所有的字體樣式*/
body {
overflow:auto;
}
#mq {
width:220px;
height:40px;
line-height:20px;
overflow:hidden;
border:1px solid black;
}
#mq div {
position:absolute;
width:220px;
padding:0px 10px;
}
</style>
<script>
function init(){
initMq($("mq"));
$("mq").start();
}
function initMq(obj){
var objs;
//定義跑馬燈對象的自定義屬性
obj.currentItem = -1;
obj.loopDelay = 50;
obj.loopItems = new Array();
obj.loopTimer = null;
obj.speedX = 2;
obj.speedY = 2;
//定義跑馬燈對象的自定義方法
obj.loop = mq_loop;
obj.start = mq_startLoop;
obj.stop = mq_stopLoop;
//定義跑馬燈對象的事件
obj.onmouseover = function(){ this.stop(); }
obj.onmouseout = function(){ this.loop(); }
//獲取跑馬燈對象的所有子元素
objs = obj.getElementsByTagName("div");
for(var i=0; i<objs.length; i++){
//在loopItems屬性中記錄子元素
obj.loopItems.push(objs[i]);
//自定義子元素的屬性和方法
objs[i].index = i;
objs[i].move = move;
objs[i].reset = mq_reset;
//初始化子元素的狀態
objs[i].reset();
}
}
function move(x, y){
this.style.left = x + "px";
this.style.top = y + "px";
}
function mq_loop(){
var obj;
clearTimeout(this.loopTimer);
if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
obj = this.loopItems[this.currentItem];
if(obj.offsetLeft!=this.offsetLeft){
//向左卷動
obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
}else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){
//向上卷動
obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
}else{
//重置該子元素
obj.reset();
this.currentItem++;
}
this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
}
function mq_reset(){
var p = this.parentNode;
this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
}
function mq_startLoop(){
for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
this.currentItem = 0;
this.loop();
}
function mq_stopLoop(){
clearTimeout(this.loopTimer);
}
function $(str){ return(document.getElementById(str)); }
window.onload = init;
</script>
</head>
<body>
<div id="mq">
<div> js實現的跑馬燈效果11111 </div>
<div> js實現的跑馬燈效果22222 </div>
</div>
</body>
</html>
轉自：http://yuncode.net/code/c_50796e1da2e7863