jQuery实现适用于移动端的跑马灯抽奖特效示例


Posted in jQuery onJanuary 18, 2019

本文实例讲述了jQuery实现适用于移动端的跑马灯抽奖特效。分享给大家供大家参考,具体如下:

图片全部隐私处理

跑马灯抽奖特效难点一:奖品位置排放,如下图

jQuery实现适用于移动端的跑马灯抽奖特效示例

<div class="gift_div">
  <div class="gift gift1">奖品1</div>
  <div class="gift gift2">奖品2</div>
  <div class="gift gift3">奖品3</div>
  <div class="gift gift4">奖品4</div>
  <div class="gift gift5">奖品5</div>
  <div class="gift gift6">奖品6</div>
  <div class="gift gift7">奖品7</div>
  <div class="gift gift8">奖品8</div>
  <div class="start">开始抽奖</div>
</div>

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

难点二:速度控制,其实这个没啥,多尝试几个速度就行;

js代码重点就是定时器的循环,代码如下:

$(function() {
  var speed = 150, //跑马灯速度
    click = true, //阻止多次点击
    img_index = -1, //阴影停在当前奖品的序号
    circle = 0, //跑马灯跑了多少次
    maths,//取一个随机数;
    num=$('.red').text();
  $('.start').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 = $('.gift_div .gift:eq(' + img_index + ')').text();
      console.log(circle + maths, 'aaa', img_index, $('.gift_div .gift:eq(' + img_index + ')').text())
      clearTimeout(timer);
      setTimeout(function() {
        alert('恭喜获得' + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $('.red').text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $('.gift_div .gift:eq(' + img_index + ')').addClass('gift_b').siblings().removeClass('gift_b');
  }
});

上面的代码,从最上面定义我们所需的各种参数(都已做了注解);

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

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

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

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

完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/choujiang.css" rel="external nofollow" />
    <style type="text/css">
    </style>
  </head>
  <body>
    <div class="light">
      <div class="num">
        您今日抽奖机会还有<span class="red">3</span>次
      </div>
      <div class="gift_div">
        <div class="gift gift1">奖品1</div>
        <div class="gift gift2">奖品2</div>
        <div class="gift gift3">奖品3</div>
        <div class="gift gift4">奖品4</div>
        <div class="gift gift5">奖品5</div>
        <div class="gift gift6">奖品6</div>
        <div class="gift gift7">奖品7</div>
        <div class="gift gift8">奖品8</div>
        <div class="start">开始抽奖</div>
      </div>
    </div>
  </body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/choujiang.js" type="text/javascript" charset="utf-8"></script>
</html>

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: '';
  left: 0;
}

js部分:

$(function() {
  var speed = 150, //跑马灯速度
    click = true, //阻止多次点击
    img_index = -1, //阴影停在当前奖品的序号
    circle = 0, //跑马灯跑了多少次
    maths,//取一个随机数;
    num=$('.red').text();
  $('.start').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 = $('.gift_div .gift:eq(' + img_index + ')').text();
      console.log(circle + maths, 'aaa', img_index, $('.gift_div .gift:eq(' + img_index + ')').text())
      clearTimeout(timer);
      setTimeout(function() {
        alert('恭喜获得' + text)
      }, 300)
      click = true;
      speed = 150;
      circle = 0;
      img_index = -1;
      num--;
      $('.red').text(num)
    }
  }
  function img() {
    if(img_index < 7) {
      img_index++;
    } else if(img_index == 7) {
      img_index = 0;
    }
    $('.gift_div .gift:eq(' + img_index + ')').addClass('gift_b').siblings().removeClass('gift_b');
  }
});

html里面引用的rem.js是我自己封装的,让100px=1rem;

PS:这里推荐两款相关在线HTML/CSS/JS运行工具如下:

在线HTML/CSS/JavaScript代码运行工具:
http://tools.3water.com/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具:
http://tools.3water.com/code/WebCodeRun

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
JQuery判断正整数整理小结
Aug 21 jQuery
jquery实现限制textarea输入字数的方法
Sep 06 jQuery
jQuery基于cookie实现换肤功能实例
Oct 14 jQuery
JQuery animate动画应用示例
May 14 jQuery
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 #jQuery
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 #jQuery
jquery的$().each和$.each的区别
Jan 18 #jQuery
jquery层次选择器的介绍
Jan 18 #jQuery
jQuery无冲突模式详解
Jan 17 #jQuery
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 #jQuery
Jquery获取radio选中值实例总结
Jan 17 #jQuery
You might like
PHP在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
图片完美缩放
2006/09/07 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
使用变量动态设置js的属性名
2014/10/19 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python命名空间详解
2014/08/18 Python
使用Python脚本来控制Windows Azure的简单教程
2015/04/16 Python
Python机器学习之SVM支持向量机
2017/12/27 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
python 实现的发送邮件模板【普通邮件、带附件、带图片邮件】
2019/07/06 Python
Django如何实现上传图片功能
2019/08/16 Python
Python自动化之UnitTest框架实战记录
2020/09/08 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
波兰快递服务:Globkurier.pl
2019/11/08 全球购物
大门门卫岗位职责
2013/11/30 职场文书
狼和鹿教学反思
2014/02/05 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技
MySQL分布式恢复进阶
2022/07/23 MySQL