Jquery数字转盘：
项目中，在充值流程中，加入了1个抽奖环节，需要转盘显示抽中的虚拟货币。网上找了相关的特效，最后锁定在这个特效上：http://www.jb51.net/jiaoben/319636.html。因为用的是jquery实现的，项目中有引入jquery，不用添加新的js库就很方便的实现。
整个流程是：用户支付完成后，后台随机产生抽中的数字，传到转盘页面。转盘页面只是负责动态的显示后台产生的数字（而不是页面产生随机数）。那好，前端的工作就变成了接收一个数字，我们这里假定是三位的，两位的数字后端传过来的时候百位上就补零了，如：85补成085；前端负责动态的显示085就醒了。
UI效果图：
修改下下来的代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>充值抽奖</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="../../assets/css/amazeui.min.css?v=1.0">
<link rel="stylesheet" href="../../assets/css/style1.css?v=1.0">
<link rel="stylesheet" href="../../assets/css/index.css?v=1.0">
<style>
input, button, select, textarea, a:fouse {outline:none}
li {list-style:none;}
img {border:none;}
textarea {resize:none;}
body {margin:0;font: 12px "微软雅黑"; background: #feecd4;}
/* === End CSS Reset ========== */ body{
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<950?"950px":"");
}
a{
text-decoration: none;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;} .container{
width:100%;
margin: 0 auto;
position: relative;
/*height: 198px;*/
} /* 头部 */
/*.main{
background: url("images/main.jpg") no-repeat center;
background: #feecd4;
height: 351px;
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}*/
.main2{
margin:0 auto;
background: url("../../assets/images/activities/main2-1.png") no-repeat center;
width:300px;
height:300px;
background-size:300px 300px;
/*最小宽度*/
}
.main3{
/*background: url("images/main3.jpg") no-repeat center;
height: 381px;*/
_width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
}
.main3-text{
color:#744b00;
font-size: 23px;
font-weight: bold;
position: absolute;
left: 74px;
top: 210px;
}
.main3-text2{
color:#744b00;
font-size: 14px;
position: absolute;
left: 74px;
top: 254px;
line-height: 22px;
width: 867px;
}
.main-text{
position: absolute;
left: 360px;
top: 325px;
color:#b03b01;
font-size: 16px;
}
.main2-text1{
position: absolute;
left: 79px;
top: 45px;
color:#ffffff;
font-size: 16px;
}
.main2-text2{
position: absolute;
left: 69px;
top: 67px;
color:#ffffff;
font-size: 23px;
font-weight: bold;
}
.main2-text2 span{
color:#ffff00;
}
.main2-text3{
position: absolute;
left: 69px;
top: 97px;
color:#ffffff;
font-size: 18px;
}
.main2-text4{
position: absolute;
left: 382px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text4 span{
color:#ffe700;
font-weight: bold;
}
.main2-text5{
position: absolute;
left: 665px;
top: 34px;
color:#ffffff;
font-size: 18px;
}
.main2-text5 span{
color:#ffe700;
font-weight: bold;
}
.num{
position: absolute;
left: 30px;
top: 95px;
width: 72px;
height: 112px;
overflow: hidden;
}
.num-con{
position: relative;
top:-724px;
}
.num-img{
background: url("../../assets/images/activities/num-1.png") no-repeat;
width: 72px;
height: 744px;
margin-bottom: 4px;
}
.num2{
left: 114px;
}
.num3{
left: 198px;
} .main3-btn{
width: 307px;
height: 95px;
position: absolute;
left: 313px;
top: -290px;
cursor: pointer;
}
</style>
</head>
<body class="bg-home" style="">
</header>
<body>
<section class="activities">
<div class="am-padding-sm text-center font-16 content1" style="padding-top:1.5rem;">
<img style="width:100%;"src="../../assets/images/activities/word-2.png"/>
<div class="font-16 font-bold" style="left:53%;bottom:10%;position:absolute;color:#fff601">200-800</div>
</div> <!--转盘-->
<div style="margin-top:6%;">
<div class="main2">
<div class="container">
<div class="num num1">
<div class="num-con num-con1">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num2">
<div class="num-con num-con2">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
<div class="num num3">
<div class="num-con num-con3">
<div class="num-img"></div>
<div class="num-img"></div>
</div>
</div>
</div>
</div>
<!--点击抽奖按钮-->
<div style="margin:5% auto 0 auto;width:250px;" id="lottery">
<img style="width:100%;" src="../../assets/images/activities/lottery.png"/>
</div>
<!--返回个人中心-->
<div style="margin:5% auto 0 auto;width:250px;" id="lottery">
<img style="width:100%;" src="../../assets/images/activities/personal.png"/>
</div>
<!--蒙版图层-->
<section>
<div id="masking-bg">
</div>
<div id="masking-layer"> <div class="masking-banner" onclick="" style="width:270px;left:50%;top:20%; margin-left:-135px;">
<img class="img-bg" src="../../assets/images/activities/lottery-notice.png"/>
<div class="font-25 font-white" style="top:64%;">X<span id="money">500</span></div>
<div style="width:200px;position:absolute;z-index:2000;bottom:0;left:50%; margin-left:-100px;padding-top:8%;" onclick="window.location.href=''">
<img style = "width:100%;"src="../../assets/images/activities/lixy.png"/>
</div>
<div class="close1" onclick="closeMasking()" style="width:40px;left:230px;top:0;">
<img style="width:100%;" src="../../assets/images/common/X-1.png"/>
</div>
</div>
</div>
</section> </section> <script src="../../assets/js/jquery.min.js"></script>
<script>
//设置body高度等于手机屏幕高度
$(".activities").height($(window).height());
</script>
<script type="text/javascript">
$("#lottery").click(function () {
reset();
letGo();
}); var flag=false;
var index=0;
var TextNum1
var TextNum2
var TextNum3 //后台传来的随机的金额，数字字符串格式
var money = "341";
function letGo(){ TextNum1=money[0];
TextNum2=money[1];
TextNum3=money[2];
//位置数组 比如arr[0]就是0所在的位置
var arr= [-724,-798.4,-872.8,-947.2,-1021.6,-1096,-1170.4,-1244.8,-1319.2,-646.3];
//百位
var num1=arr[TextNum1];//在这里随机
var num2=arr[TextNum2];
var num3=arr[TextNum3]; //百位
function do1(){
$(".num-con1").animate({"top":-1140},1500,"linear", function () {
$(this).css("top",0).animate({"top":num1},1500,"linear");
setTimeout(function(){showMasking(money)},2000);
}); } //十位
function do2(){
$(".num-con2").animate({"top":-1140},1000,"linear", function () {
$(this).css("top",0).animate({"top":num2},1000,"linear");
});
} //个位
function do3(){
$(".num-con3").animate({"top":-1492},500,"linear", function () {
$(this).css("top",0).animate({"top":num3},500,"linear");
});
}
setTimeout(do3,0);
setTimeout(do2,0);
setTimeout(do1,0);
} function reset(){
$(".num-con1,.num-con2,.num-con3").css({"top":-724});
} $('#masking-layer').height($(window).height());
function showMasking(text){
$('#masking-bg').css('display','block');
$('#masking-layer').css('display','block');
$('#money').text(text)
} function closeMasking(){
$('#masking-bg').css('display','none');
$('#masking-layer').css('display','none');
} </script>
</script>
</body>
</html>
上面的代码并不全，因为引入的3个css里的样式没区出来，相信你已经看懂怎么实现了。
Jquery数字转盘：的更多相关文章
- jQuery数字加减插件
jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...
- jquery实现转盘抽奖
jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...
- jquery 数字滚动方法
jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...
- jquery数字验证大小比较
$("#rewardForm").validate({ rules: { "reward": { ...
- jQuery数字滚动（模拟网站人气、访问量递增）原创
插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params); 参数详解 val:数值型(默认70225800): pa ...
- JQuery数字类型验证正则表达式
有朋友整了一些关于js与jquery的数字类型验证正则表达式代码,下面我给大家再整理一下. 这里包括了数字验证实现与测试实例了,大家可参考. js验证数字正则表达式 代码如下: //检测是否为数字和小 ...
- jQuery 数字滚动插件
这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...
- 常用的JQuery数字类型验证正则表达式
var regexEnum = { intege:"^-?[1-9]//d*$", //整数 intege1:"^[1-9]//d*$", ...
- 一些常用的jquery数字正则表达式
使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...
随机推荐
- 5.win上安装ES
安装步骤如下: 1.安装JDK 至少1.8.0_73以上版本,使用 java -version 这个命令进行查看java的版本 2.下载和解压缩Elasticsearch安装包, 解压后目录结构: 3 ...
- Nginx学习总结（1）——Nginx入门简介
本文主要介绍一些Nginx的最基本功能以及简单配置,但不包括Nginx的安装部署以及实现原理.废话不多,直接开始. 1.静态HTTP服务器 首先,Nginx是一个HTTP服务器,可以将服务器上的静态文 ...
- Java Web学习总结（19）——web.xml配置详解
1.启动一个WEB项目的时候,WEB容器会去读取它的配置文件web.xml,读取<listener>和<context-param>两个结点. 2.紧急着,容创建一个Servl ...
- [bzoj2588][Spoj10628]Count on a tree_主席树
Count on a tree bzoj-2588 Spoj-10628 题目大意:给定一棵n个点的树,m次查询.查询路径上k小值. 注释:$1\le n,m\le 10^5$. 想法:好像更博顺序有 ...
- [jQuery]jQuery获取URL参数
// jQuery url get parameters function [获取URL的GET参数值]// <code>// var GET = $.urlGet(); //获取URL的 ...
- HDU 5187
超简单的公式题(2^n-2).不过,要过可不容易,因为会爆64位,所以,可以使用快速乘法. #include <iostream> #include <cstdio> #inc ...
- SPOJ 1771&&DLX精确覆盖，重复覆盖
DLX的题,做过这题才算是会吧. 这道题转化成了精确覆盖模型来做,一开始,只是单纯的要覆盖完行列和斜线,WA. 后来醒悟了,不能这样,只要覆盖全部行或列即可.虽然如此,但某些细节地方很关键不能考虑到. ...
- 怎样在QML中使用multitouch
在Qt QML中.它能够利用multitouch来做一些我们想做的事情.在今天的文章中.我们将介绍怎样使用multitouch来做一些我们想做的事. 事实上,在QML中利用多点触控是很easy的一件事 ...
- JAVA小程序：和电脑猜拳
import java.util.Scanner; import java.util.Random; public class Hello { public static int judge ...
- 【cl】子查询应用场景
有推荐人/没有推荐人的 recommender_id is null / is not null 谁是推荐人=他的id是别人的recommender_id=某个人的recommender_id是他的i ...