你的位置:首页 > Java教程

[Java教程]jquery实现抽奖转盘


用jquery通过配置参数实现抽奖转盘

1.html代码

<!DOCTYPE html><html lang="zh-CN">  <head>    <meta charset="UTF-8">    <title>抽奖活动</title>    <meta name="keyword" content="">    <meta name="description" content="">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="renderer" content="webkit">    <script type="text/javascript" src="js/jquery.js"></script>    <!-- 业务样式 -->    <link rel="stylesheet" type="text/css" href="css/index.css">    <!--[if lt IE 9]>    <link rel="stylesheet" href="http://static.51offer.com/skin/css/study-abroad-steps/ie.css"/>    <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>    <![endif]-->  </head>  <body>    <div >      <div >        <div id="zhuanpan">          <div >            <ul >              <li ></li>              <li ></li>              <li ></li>              <li ></li>              <li ></li>              <li ></li>            </ul>          </div>          <img src="img/choujiang.png">          <img src="img/reward.png">        </div>      </div>    </div>    <script type="text/javascript" src="js/index.js"></script>  </body></html>

2.调用的js

var config = {  "rollId": '#rollId', //外层divid  "rollBtn": ".rollBtn", //点击滚动的按钮--class  "rollList": ".rollList",  "pinIndex": 0, //滚动的起点  "speed": 200, //滚动的速度  "cycle": 0, //滚动的圈数  "fastCycle": 5, //快速滚动圈数  "rollResult": 4 //抽奖的结果};var Roll = function() {  var self = this;  self.config = config;  self.stopIndex = '';  self.isRolling = false;  self.timer = null;  self.ops = '';  self.rollId = '';  self.rollBtn = '';  self.rollList = '';  self.rollIndex = 0;}var roll=new Roll();$(function(){	$(".choujiang").on("click",function(){		rollFun(4);	});})function rollFun(prize_code) {  roll.init({    "rollId": '#zhuanpan',    "rollBtn": ".choujiang",    "rollList": ".zhuanpan1",    "pinIndex": 0,    "rollResult": prize_code  });  roll.start();}Roll.prototype.init = function(options) {  var self = this;  self.ops = $.extend({}, self.config, options);  self.rollId = $(self.ops.rollId);  self.rollBtn = self.rollId.find(self.ops.rollBtn);  self.rollList = self.rollId.find(self.ops.rollList).find('li');  self.stopIndex = self.ops.rollResult;};// 按钮事件Roll.prototype.start = function() {  this.rollPre();};Roll.prototype.rollPre = function() {  var self = this;  if (!self.isRolling) {    self.rollList.eq(self.ops.pinIndex).show().siblings().hide();    rollStart(self); // 开始启动转盘  }};// 指向下一个function rollGoNext(self) {  self.rollIndex += 1;  if (self.rollIndex > self.rollList.length) {    self.rollIndex = 0;    self.ops.cycle++;  }  self.rollList.eq(self.rollIndex).show().siblings().hide();}// 停止转动function rollStop(self) {  clearInterval(self.timer);  (function stopGoNext() {    if (self.rollIndex !== self.stopIndex) {      rollGoNext(self);      setTimeout(function() {        stopGoNext();      }, 300);    } else {      self.isRolling = false;      self.ops.cycle = 0;      self.rollIndex = 0;      $(".choujiang").hide();      $(".have_choujiang").show();      // self.ev.trigger('succeed', {      //   rollResult: self.stopIndex      // });    }  })();}//开始转动function rollStart(self) {  self.isRolling = true;  self.timer = setInterval(function() {    rollGoNext(self);    if (self.rollIndex == 5) {      clearInterval(self.timer);      self.ops.speed = 20;      self.timer = setInterval(function() {        rollGoNext(self);        if (self.ops.cycle >= 5) {          clearInterval(self.timer);          self.ops.speed = 200;          self.timer = setInterval(function() {            if (self.ops.cycle === 6) {              rollStop(self);            } else {              rollGoNext(self);            }          }, self.ops.speed);        }      }, self.ops.speed);    }  }, self.ops.speed);}

3.效果图

 

 

 

 

 

源代码:http://files.cnblogs.com/files/gzx618/roll.zip