手机端html跑马灯效果,js实现跑马灯效果 很好用

[]代码库

html

head

实现跑马灯效果

*{

font-;

font-宋体,;

}/*规定了所有的字体样式*/

body{

;

}

#mq{

;

height:40px;

line-height:20px;

overflow:hidden;

border:1pxsolidblack;

}

#mqdiv{

position:absolute;

width:220px;

padding:0px10px;

}

/style

script

functioninit(){

initMq($("mq"));

$("mq").start();

}

functioninitMq(obj){

varobjs;

//定义跑马灯对象的自定义属性

obj.currentItem=-1;

obj.loopDelay=50;

obj.loopItems=newArray();

obj.loopTimer=null;

obj.speedX=2;

obj.speedY=2;

//定义跑马灯对象的自定义方法

obj.loop=mq_loop;

obj.start=mq_startLoop;

obj.stop=mq_stopLoop;

//定义跑马灯对象的事件

obj.οnmοuseοver=function(){this.stop();}

obj.οnmοuseοut=function(){this.loop();}

//获取跑马灯对象的所有子元素

objs=obj.getElementsByTagName("div");

for(vari=0;iobjs.length;i++){

//在loopItems属性中记录子元素

obj.loopItems.push(objs[i]);

//自定义子元素的属性和方法

objs[i].index=i;

objs[i].move=move;

objs[i].reset=mq_reset;

//初始化子元素的状态

objs[i].reset();

}

}

functionmove(x,y){

this.style.left=x+"px";

this.style.top=y+"px";

}

functionmq_loop(){

varobj;

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);

}elseif(obj.offsetTop+obj.offsetHeightthis.offsetTop){

//向上卷动

obj.move(obj.offsetLeft,obj.offsetTop-this.speedX);

}else{

//重置该子元素

obj.reset();

this.currentItem++;

}

this.loopTimer=setTimeout("$(\""+this.id+"\").loop();",this.loopDelay);

}

functionmq_reset(){

varp=this.parentNode;

this.move(p.offsetLeft+p.offsetWidth,p.offsetTop);

}

functionmq_startLoop(){

for(vari=0;ithis.loopItems.length;i++)this.loopItems[i].reset();

this.currentItem=0;

this.loop();

}

functionmq_stopLoop(){

clearTimeout(this.loopTimer);

}

function$(str){return(document.getElementById(str));}

window.οnlοad=init;

/script

/head

body

divid="mq"

divjs实现的跑马灯效果11111/div

divjs实现的跑马灯效果22222/div

/div

/body

/html

[代码运行效果截图]