跑马灯程序

/************************************************************************************
**功能：跑马灯
**参数：stepTime，移动一像素花的时间
** img，跑马灯的图片
************************************************************************************/
function CloudAnimate(stepTime, img){
//一像素移动时间
this.stepTime = stepTime;

//记录循环次数
this.count = 0;

//跑马灯元素
this.elems = null;

//跑马灯元素个数
this.number = 0;

//第一个元素放置位置
this.startPos = 0;

//元素宽度
this.width = 0;

//元素背景图片
this.img = img;

this.movement = null;

//对跑马灯元素进行初始化
this.init = function(){
if($(window).width() > 1920){
var left = parseInt(($(window).width() - 1920) / 2);
$(".cloud").css({"width":"1920px", "left":left+"px"});
}

this.width = $(".cloud").width();
this.number = 2;

var str = "";
for(var i=0; i<this.number; i++){
str += '<div style="background:url(' + this.img + ') center top no-repeat;left:'+ (this.startPos + this.width * i) +'px;"></div>';
}
$(".cloud").html(str);


this.elems = $(".cloud div");
};

//跑马灯开始动画
this.start = function(){
cloudMove(this)();
};

//跑马灯停止动画
this.stop = function(){
clearTimeout(this.moverment);
};

//跑马灯动画，当有元素从左侧淡出时，跳到队尾
function cloudMove(that){
return function(){
var tElem = $(that.elems).eq(that.count % $(that.elems).length),
tleft = parseInt($(tElem).css("left"));

if(tleft <= "-"+that.width){
$(tElem).css({"left":that.width * ($(that.elems).length - 1)+"px"});
that.count++;
}
$(that.elems).each(function(i, e){
$(e).css({"left":(parseInt($(e).css("left")) - 1)+"px"});
});

that.movement = setTimeout(cloudMove(that), that.stepTime);
}
}
}

/*********************初始化动画*********************/
var cloud = new CloudAnimate(100, "../statics/asset/img/shadu/cloud.png");
cloud.init();
cloud.start();

$(window).bind("resize", function() {
cloud.init();
});
/*********************结束动画*********************/

转载于:https://www.cnblogs.com/hity/p/Marquee.html