jQuery实现移动终端跑马灯抽奖特效示例

本文通过一个例子来说明jQuery如何实现移动终端的滚动条绘制的特殊效果。分享给大家参考，如下：

所有图片都是私下处理的

彩灯抽奖特效的难点：奖品的位置被排出，如下图所示

Div class=' gift _ Div ' Div class=' gift gift 1 '奖div class=' gift gif2 '奖div class=' gift gif3 '奖div div class=' gift gif4 '奖div class=' gift gift5 '奖div class=' gift gift6 '奖div class=' gift gift7 '奖div class=' gift gift8 '奖div div class=' start '开始抽奖/div/div根据代码惯例，

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

Js代码主要关注定时器周期，代码如下：

$(function() {var speed=150，//跑马灯speed click=true，//防止多次点击img_index=-1，//阴影停在当前奖圈的序号处=0，//跑马灯运行多少次数学，//取一个随机数；num=$('。红色')。text()；$('.开始’)。click(function(){ if(click num 0){ click=false；数学=parsent((math . random()* 10)80)；light()；} else { return false} });函数light(){ img()；圆圈；var timer=setTimeout(灯光、速度)；if(圈0圈5){ speed-=10；} else if(圈5圈20){ speed-=5；} else if(圆50圆70) { speed=5 } else if(圆70圆数学){ speed=10 } else if(圆==数学){ var text=$('。gift _ div . gift : eq(' img _ index '))。text()；console.log(圈数学，' aaa '，img_index，$(')。gift _ div . gift : eq(' img _ index '))。text()) clearTimeout(计时器)；SetTimeout(function() {alert('恭喜得到' text) }，300)click=true；速度=150；圆圈=0；img _ index=-1；num-；$('.红色')。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 ')。兄弟姐妹()。remove CLaSS(' gift _ b ')；}});上面的代码从顶部定义了我们需要的各种参数(都已经注释了)；

然后点击开始抽奖。首先，在执行抽奖之前，我们必须判断第一次抽奖是否已经结束，今天是否还有剩余的抽奖次数。当这两个条件满足时，开始执行抽奖灯()。同时，在开始抽奖之前，将click参数设置为false，以避免用户在抽奖结束前开始下一次抽奖。

在抽奖灯()函数中，在抽奖阴影不断移动的情况下调用函数img()，然后给一个timer vartimer=settimeout(灯，速度)；这个计时器中的光根据速度的快慢不断调用函数light()，然后我们根据彩票影子移动的次数不断改变速度来改变光的调用速度和影子的移动速度(这个速度取决于数值有多舒服)；

最后，在这个light()函数结束时，定时器应该被清除。彩票总会抽到一些东西。如何不停顿的画画？暂停后，开始抽奖前重置参数。

上面有一个数学随机数，就是随机让用户抽奖，如果需要固定比例的下一节。

完整的代码如下：

！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-scaled=no ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' title/title script src=' http 3360 js/rem。js ' TYPE=' text/JAVAScript ' charset=' utf-8 '/script link rel='样式表类型您今日抽奖机会还有span class='red'3/span次/div class=' gift _ div ' div class=' gift礼物1 '奖品1/div div class='礼品2 '奖品' div class='礼物礼品3 '奖品3/div div class='礼物gift4 '奖品' div class='礼物gift5 '奖品' div class='礼品gift6 '奖品' div class='礼品gift7 '奖品' div class='礼物礼品8 '奖品8/div类=开始开始抽奖/div/div/body脚本src=' http : js/jquery-2。1 .1 .量滴js ' type=' text/JAVAScript ' charset=' utf-8 '/script script src=' http : js/choujiang。js ' type=' text/JavaScript ' charset=' utf-8 '/script/html CSS部分：

* { margin : 0；padd : 0；}.轻{宽度： 100%;高度： 7.6雷姆；背景# BD1d 25 adding : 2 rem盒子尺寸：边框盒子；字号：24雷姆；}.光gift _ div { width : 100%；高度： 6.4毫米背景： # 139365;边界半径：1雷姆；相对位置：padd :05雷姆。5%;盒子尺寸：边框盒子；页边距-顶部：2雷姆；}.gift _ div div { position :绝对值；宽度： 32%;高度： 2毫米保证金：05雷姆。5%;背景技术# e6f 0 ecborder-半径：06 rem}.gift2、gift6、10 .开始{左： 33.5%；}.gift3、gift4、gif 5 {右：5%;}.gift4、开始。gift6、礼物7 {底部：05雷姆；}.礼物.开始{ background: # FDB827文本对齐：中心；线高： 2雷姆；color: # FF001F}。红色{ color:红色；}.num { text-align : center字号：32雷姆；线高：6雷姆；背景# E6 efecbOrder-半径：6雷姆；}.gift_b:after{ position:绝对值；宽度： 100%;高度： 100%;背景： rgba(0，0，0，6);内容： " "；左： 0；}js部分：

$(function() { var speed=150，//跑马灯速度click=true，//阻止多次点击img_index=-1，//阴影停在当前奖品的序号圆圈=0,//跑马灯跑了多少次数学，//取一个随机数；num=$(' .红色')。text()；$('.开始')。click(function(){ if(click num 0){ click=false；数学=parsent((数学。random()* 10)80)；light()；} else { return false } })；函数light(){ img()；圆圈；var定时器=setTimeout(灯光、速度);如果(圈0圈5){速度-=10；} else if(圈5圈20){速度-=5；} else if(圆50圆70) {速度=5 }否则如果(圆70圆数学){速度=10 }否则如果(圆==数学){ var text=$(' .gift _ div。礼品： eq(' img _ index ').text()；console.log(圈数学，' aaa '，img_index，$(').gift _ div。礼品： eq(' img _ index ').text()) clearTimeout(计时器);setTimeout(函数(){ alert('恭喜获得text) }，300)click=true；速度=150;圆圈=0;img _ index=-1；num-；$('.红色')。text(num)} } function img(){ if(img _ index 7){ img _ index；} else if(img _ index==7){ img _ index=0；} $('.gift _ div。礼品： eq(' img _ index ').addClass('gift_b ').兄弟姐妹()。移除CLaSS(' gift _ b ')；}});超文本标记语言里面引用的rem.js是我自己封装的，让100px=1rem

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

在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun

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

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

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