[]代码库
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
[代码运行效果截图]
如果觉得《手机端html跑马灯效果 js实现跑马灯效果 很好用》对你有帮助，请点赞、收藏，并留下你的观点哦！
