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

2024-09-26 14:38:07

本文实例讲述了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.jb51.net/code/HtmlJsRun

在线HTML/CSS/JavaScript前端代码调试运行工具：
http://tools.jb51.net/code/WebCodeRun

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery图片操作技巧大全》、《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

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

js实现移动端轮播图

本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法

本文实例讲述了jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法.分享给大家供大家参考,具体如下: 项目描述:九宫格的跑马灯抽奖特效,抽中奖品1-9的概率分别是2%,2%,4%,1%,12%,1%,8%,70%,概率总计100%,并且每天抽奖次数最多为3次. html部分的代码和css部分的代码和上一节<jQuery移动端跑马灯抽奖特效>一样,没有修改,js部分有修改,增加了概率. 原理很简单,同样是取随机数,判断这个随机数的大小在100的0-2,2-4,4-8,8-9,9-21,
移动端使用CSS或JS判断横屏和竖屏的讲解

在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏.竖屏来写不同的代码呢. 首先在head中加入如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 针对上述viewport标签有如下说明 1).content中的width
使用vue开发移动端管理后台的注意事项

独立完成一个移动端项目(不是很明白为何会有这样的商品管理后台),还是有些经验不足,包括对产品的全局思考,对插件的选择等,都有考虑不周的缺点,导致自己中途想换图形界面插件,浪费了点时间,这里记录下,总结下经验,理一下思路. 1.对于项目的一些心得与体会首先的一点,就是,对于图形界面框架的选型,这个很重要,对于一项目来说,开始动手前就要对项目的设计图有个完整的了解,以便于自己选择插件或者框架: 然后就是,对于交互性操作,比如:上传图片,预览图片啥的,应该选择是否是用图形界面框架来实现还是另选专门的
详解vue移动端项目代码拆分记录

撸一套vue多端共用,非常适合需要快速且全面上线的项目.但是多端共用一套vue代码,由于平台间的互相限制,每端在某些业务例如支付分享等是完全独立的代码,每个平台的支付方式也会有所差异,造成在这些业务的实现过程中会有太冗余的"if else"判断.所以为了提高代码的复用性.扩展性,可以将代码拆分,以-小程序和App两端举例,一份部署到小程序,一份部署到App(Android&Ios). 首先代码拆分应该保证本地开发的时候只有一套代码,提取所有公共页面,并且分别提取小程序和app的
如何封装了一个vue移动端下拉加载下一页数据的组件

前言简单封装了一个vue下拉加载组件,分享一下,已放到github和前端资源库,欢迎下载! 组件代码 <template> <div class="my-scroll" :class="[scrollState?'prohibit':'allow']" ref="myScroll" @scroll.passive="onScroll($event)" @touchmove="onScroll($e
vue插件mescroll.js实现移动端上拉加载和下拉刷新

做一个简单的移动端展示项目,后台分页后前端加载,实现上拉加载下一页,找了下,还是用这个mescroll.js插件好一点 1.npm安装 npm install --save mescroll.js //不要使用cnpm安装导入(在哪个页面使用,则在哪个页面导入(这里的话,我使用全局导入会出现问题,若有错,还请大家指出,暂时想到的就是局部引入)): import MescrollVue from 'mescroll.js/mescroll.vue' 注册组件: components: { Mes
原生js实现移动端Touch轮播图的方法步骤

Touch 轮播图 touch轮播图其实就是通过手指的滑动,来左右切换轮播图,下面我们通过一个案例,来实现下. 1. html 结构结构上,还是用ul.li来存放轮播图片,ol.li来存放轮播小圆点: 2. 样式初始化 html的一些标签,都会有一些默认样式,比如body标签默认是有一个边距的,为了不影响美观,我们需要清除掉. /* 清除标签默认边距 */ body,ul,li,ol,img { margin: 0; padding: 0; } /* 清除 ul 等标签前面的"小圆点"
移动端（微信等使用vConsole调试console的方法

前言因为最近一直在弄移动端项目,由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼容不好,所以最近使用了vConsole 进行调试使用废话不多说,说说怎么使用的吧. 首先去下载相关的代码,由于只需要在页面引入一个js文件,直接去下载就可以,地址: 请戳我或者使用 npm 安装: npm install vconsole 使用webpack,然后js代码中 import VCo
利用Vconsole和Fillder进行移动端抓包调试方法

在开发中,有时候我们需要在手机上进行测试,可是如果遇到bug,我们怎么进行抓包调试呢?这里介绍两种方式: Vconsole Fillder 利用Vconsole进行调试一个轻量.可拓展.针对手机网页的前端开发者调试面板 Vconsole特性: 查看 console 日志查看网络请求手动执行 JS 命令行自定义插件入门 ①首先需要下载Vconsole,地址https://www.npmjs.com/package/vconsole ② npm install vconsole ③ Imp

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

相关推荐

随机推荐