使用jQuery怎么实现一个适用于移动端的跑马灯抽奖特效

按照代码常规，奖品1,2,3,4是顺序排列，在这里，使用了定位将他们绕成一个圈。

难点二：速度控制，其实这个没啥，多尝试几个速度就行；

js代码重点就是定时器的循环，代码如下：

$(function() {
  var speed = 150, //跑马灯速度
    click = true, //阻止多次点击
    img_index = -1, //阴影停在当前奖品的序号
    circle = 0, //跑马灯跑了多少次
    maths,//取一个随机数;
    num=$(&＃39;.red&＃39;).text();
  $(&＃39;.start&＃39;).click(function() {
    if(click&&num>0) {
      click = false;
      maths = parseInt((Math.random() * 10) + 80);
      light();
    } else {
      return false;
    }
  });
  function light() {
    img();
    circle++;
    var timer = setTimeout(light, speed);
    if(circle > 0 && circle < 5) {
      speed -= 10;
    } else if(circle > 5 && circle < 20) {
      speed -= 5;
    } else if(circle > 50 && circle < 70) {
      speed += 5
    } else if(circle > 70 && circle < maths) {
      speed += 10
    } else if(circle == maths) {
      var text = $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).text();
      console.log(circle + maths, &＃39;aaa&＃39;, img_index, $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).text())
      clearTimeout(timer);
      setTimeout(function() {
        alert(&＃39;恭喜获得&＃39; + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $(&＃39;.red&＃39;).text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).addClass(&＃39;gift_b&＃39;).siblings().removeClass(&＃39;gift_b&＃39;);
  }
});

上面的代码，从最上面定义我们所需的各种参数（都已做了注解）；

接着点击开始抽奖，首先，在抽奖执行以前我们要先判断让一次的抽奖是否已经结束并且今天是否还有剩余的抽奖次数，当这两个条件都满足，开始执行抽奖light()，同时，在开始抽奖之前，将click这个参数置为false，避免抽奖还没结束用户就开始下一次的抽奖；

在抽奖light()函数里面调用抽奖阴影不停移动的函数img()，接着，给一个定时器var timer = setTimeout(light, speed);这个定时器里面的light就是根据speed的速度来不停的调用light()这个函数本身（城会玩），然后我们在下面根据这个抽奖阴影移动的次数不停地改变speed来改变light的调用速度从而改变阴影的移动速度（这个速度自己看数值怎么舒服怎么改吧）；

最后在这个light()函数的最后要做定时器的清除，抽奖总要抽到东西的呀，不暂停怎么抽。。暂停以后要重置开始抽奖之前的参数。

上面有一个maths随机数，这个是随机让用户抽奖随机中哪一个，要是需要固定比例的下一节出。

完整代码如下：

  
    
    
    
    
    
    
    
  
  
    
      
        您今日抽奖机会还有3次
      
      
        奖品1
        奖品2
        奖品3
        奖品4
        奖品5
        奖品6
        奖品7
        奖品8
        开始抽奖
      
    
  

css部分：

* {
  margin: 0;
  padding: 0;
}
.light {
  width: 100%;
  height: 7.6rem;
  background: #BD1D25;
  padding: .2rem;
  box-sizing: border-box;
  font-size: .24rem;
}
.light .gift_div {
  width: 100%;
  height: 6.4rem;
  background: #139365;
  border-radius: .1rem;
  position: relative;
  padding: .05rem .5%;
  box-sizing: border-box;
  margin-top: .2rem;
}
.gift_div>div {
  position: absolute;
  width: 32%;
  height: 2rem;
  margin: .05rem .5%;
  background: #E6F0EC;
  border-radius: .06rem;
}
.gift2,
.gift6,
.start{
  left: 33.5%;
}
.gift3,
.gift4,
.gift5{
  right: .5%;
}
.gift4,
.gift8,
.start{
  top: 2.15rem;
}
.gift5,
.gift6,
.gift7{
  bottom: .05rem;
}
.gift_div .start{
  background: #FDB827;
  text-align: center;
  line-height: 2rem;
  color: #FF001F;
}
.red{
  color: red;
}
.num{
  text-align: center;
  font-size: .32rem;
  line-height: .6rem;
  background: #E6EFEC;
  border-radius: .6rem;
}
.gift_b:after{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  content: &＃39;&＃39;;
  left: 0;
}

js部分：

$(function() {
  var speed = 150, //跑马灯速度
    click = true, //阻止多次点击
    img_index = -1, //阴影停在当前奖品的序号
    circle = 0, //跑马灯跑了多少次
    maths,//取一个随机数;
    num=$(&＃39;.red&＃39;).text();
  $(&＃39;.start&＃39;).click(function() {
    if(click&&num>0) {
      click = false;
      maths = parseInt((Math.random() * 10) + 80);
      light();
    } else {
      return false;
    }
  });
  function light() {
    img();
    circle++;
    var timer = setTimeout(light, speed);
    if(circle > 0 && circle < 5) {
      speed -= 10;
    } else if(circle > 5 && circle < 20) {
      speed -= 5;
    } else if(circle > 50 && circle < 70) {
      speed += 5
    } else if(circle > 70 && circle < maths) {
      speed += 10
    } else if(circle == maths) {
      var text = $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).text();
      console.log(circle + maths, &＃39;aaa&＃39;, img_index, $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).text())
      clearTimeout(timer);
      setTimeout(function() {
        alert(&＃39;恭喜获得&＃39; + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $(&＃39;.red&＃39;).text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $(&＃39;.gift_div .gift:eq(&＃39; + img_index + &＃39;)&＃39;).addClass(&＃39;gift_b&＃39;).siblings().removeClass(&＃39;gift_b&＃39;);
  }
});

关于使用jQuery怎么实现一个适用于移动端的跑马灯抽奖特效问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程笔记行业资讯频道了解更多相关知识。

wqp2012

这个家伙很懒，什么也没留下！

Tags | 热门标签

• case
• go
• audio
• 数组
• config
• bitmap
• install
• substring
• function
• ascii
• import
• java
• metadata
• main
• web
• httprequest
• regex
• bytecode
• utf-8
• yaml
• hook
• stream
• cmd
• const
• split
• cSharp
• bash
• settings
• c语言
• heatmap

RankList | 热门文章

• 1Oracle查看用户占用的表空间大小
• 2RecycleView 中的item移动到当前视图的顶部
• 32022网易雷火游戏研发笔试ak（4月23日）
• 464位驱动 hp630打印机_hp1020打印机64位驱动下载
• 5大学生竞赛管理系统项目
• 6http://www.bootstrapswitch.org/examples.html Not Loading
• 7mysql group by菜鸟教程_菜鸟教程(runoob.com)
• 8易点天下利用亚马逊云科技进行云上广告营销技术创新
• 9我可以从Java注释加载JPA映射并将其另存为XML吗？
• 10怎么查看php是否安装了symfony_为什么开发人员讨厌PHP？？？
• 11物联网这么火了，怎么能不懂点低功耗设计
• 12接收字节流_Java中的IO流之输入流|乐字节
• 13学习python课程第六天
• 14OpenCV014: 图像插值
• 15初次下厨的丈夫来问下面怎么做好吃

PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有