项目中，在充值流程中，加入了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数字转盘：的更多相关文章

  1. jQuery数字加减插件

    jQuery数字加减插件 我们在网上购物提交订单时,在网页上一般会有一个选择数量的控件,要求买家选择购买商品的件数,开发者会把该控件做成可以通过点击实现加减等微调操作,当然也可以直接输入数字件数.本文 ...

  2. jquery实现转盘抽奖

    jquery实现转盘抽奖 一.总结 一句话总结:这里环形转盘,环形的东西可以化成线性的,然后访问到哪个,给他加上背景为红的样式,用定时器开控制转盘的速度,函数执行的时间间隔越小,就运动的越快. 1.如 ...

  3. jquery 数字滚动方法

    jquery 数字滚动方法用的是countUp.js这个插件 target = 目标元素的 ID:startVal = 开始值:endVal = 结束值:decimals = 小数位数,默认值是0:d ...

  4. jquery数字验证大小比较

    $("#rewardForm").validate({            rules: {                "reward": {       ...

  5. jQuery数字滚动（模拟网站人气、访问量递增）原创

    插件描述:实现数字上下滚动,模拟网站人气.访问量递增的动画效果,兼容性如下: 使用方法 $(el).runNum(val,params);   参数详解 val:数值型(默认70225800): pa ...

  6. JQuery数字类型验证正则表达式

    有朋友整了一些关于js与jquery的数字类型验证正则表达式代码,下面我给大家再整理一下. 这里包括了数字验证实现与测试实例了,大家可参考. js验证数字正则表达式 代码如下: //检测是否为数字和小 ...

  7. jQuery 数字滚动插件

    这几天闲来没事写的,有不对的地方还请多多指点 CSS: ; padding:0 2px;} .digital-beating i {;; background:url(../images/icon_0 ...

  8. 常用的JQuery数字类型验证正则表达式

    var regexEnum = {  intege:"^-?[1-9]//d*$",     //整数  intege1:"^[1-9]//d*$",     ...

  9. 一些常用的jquery数字正则表达式

    使用 <script type="text/javascript"> function validate(){ var reg = new RegExp("^ ...

随机推荐

  1. cat和cp的神奇用法：制作U盘安装盘

    使用U盘安装debian,U盘的制作方法: 方法一: https://www.debian.org/doc/manuals/debian-handbook/installation.zh-cn.htm ...

  2. 继续聊WPF——进度条

    ProgressBar控件与传统WinForm使用方法完全一样,我们只需关注: Minimum——最小值,默认为0: Maximum——最大值,默认为100. Value——当前值.   关键是它的控 ...

  3. Java基本排序算法

    转载来自:https://www.jianshu.com/p/5e171281a387 一遍记住Java常用的八种排序算法与代码实现   1.直接插入排序 经常碰到这样一类排序问题:把新的数据插入到已 ...

  4. D2007从win7升级到win10下的莫名其妙问题。

    在win7下听说win10被推荐,于是升级到win10.结果使用d2007不能打开,出现莫名其妙的错误.把bin\bds.exe改名bds1.exe后居然可以启动了.一番折腾后,这把bds1.exe改 ...

  5. Music in Car

    Music in Car time limit per test 1 second memory limit per test 256 megabytes Sasha reaches the work ...

  6. 用DIME格式来组织自定义格式

    直接网际消息封装(Direct Internet Message Encapsulation,即DIME)格式提供了一种简单而又标准的机制,这个机制可以把多文本(multiple text)和二进制数 ...

  7. C#--委托的同步,异步,回调函数

    原文地址 同步调用 委托的Invoke方法用来进行同步调用.同步调用也可以叫阻塞调用,它将阻塞当前线程,然后执行调用,调用完毕后再继续向下进行. using System; using System. ...

  8. MySQL 5.7并行复制时代

    众所周知,MySQL的复制延迟是一直被诟病的问题之一,然而在Inside君之前的两篇博客中(1,2)中都已经提到了MySQL 5.7版本已经支持“真正”的并行复制功能,官方称为为enhanced mu ...

  9. 先验概率 vs 后验概率

    其实还不是很懂.看了这篇文章: http://blog.csdn.net/passball/article/details/5859878   事情还没有发生,要求这件事情发生的可能性的大小,是先验概 ...

  10. iOS 8 中 UIAlertView 和 UIActionSheet 河里去了？

    iOS 8 中 UIAlertView 和 UIActionSheet 河里去了? 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商 ...