头像滚动思路:主要以轮播图的思路为主
1、每个中奖用户设置一个div,每个div放置9张图片组成一列
2、点击开始的时候,通过传入每个需要滚动的dom对象,方法里面都重新定义,这样就每个滚动的方法和dom对象就不会相互干扰了
3、dom对象相对定位,图片列表绝对定位,通过定时移动dom对象里面的图片列表的top,实现动画效果
4、开始滚动的时候,把图片列表的第一张图片克隆放到列表的最后,当滚动到最后一张图片的时候,就把tip设为0
5、点击停止的时候,如果图片滚到最后一张图片的时候,就把定时器清除就可以了
注意:定时器的时间间隔尽量短一点,这样就不会出现掉帧
function startrun(dom){
var i = 0;
var j = 0;
var endtime = 5;//定时器的速度
var speed = 5;//每次移动多少像素
dom.append(dom.find(".prizeboxmove").eq(0).clone());
var size = dom.find(".prizeboxmove").size();
var domheight = dom.height() - 180;
var timer = setInterval(function () {
var top = speed * i;
if(j == 3){
domheight = 1850;
if(top >= 1850){
$("#startfn").show();
$("#stopbtn").hide();
$("#startfn").html("抽奖");
$("#stopbtn").html("停止");
$(".prizeboxtitle2box").show();
clearInterval(timer);
}
}
if(top >= domheight){
if(endbool){
j += 1;
speed -= 1;
}else{
if(speed <= 8){
speed += 1;
}
}
i = 0;
}
dom.css({
'top':-top+"px" //dom标签的动画为向上移动;
});
i += 1;
},endtime);
}
效果展示:
扫描二维码关注公众号,回复:
2204163 查看本文章
github地址:https://github.com/shijianfeishi/prizedraw.git
https://github.com/shijianfeishi/prizedraw.git
https://github.com/shijianfeishi/prizedraw.git