【Jquery】年会抽奖，头像滚动抽奖，自定义中奖号码

最新推荐文章于 2023-08-13 17:30:36 发布

时间飞逝子非鱼

最新推荐文章于 2023-08-13 17:30:36 发布

阅读量7k

点赞数 3

分类专栏： Jquery

本文链接：https://blog.csdn.net/lgysjfs/article/details/80282822

版权

这篇博客介绍了使用Jquery创建年会抽奖的头像滚动效果。通过设置每个中奖用户为一个div，内含9张图片，利用相对和绝对定位，配合定时器调整图片位置，实现动画滚动。当点击开始，滚动开始，点击停止时，若滚动至最后一张则清除定时器。建议定时器间隔时间短以避免掉帧。项目源码可在github找到。

摘要由CSDN通过智能技术生成

头像滚动思路：主要以轮播图的思路为主

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