项目中，在充值流程中，加入了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. hdu 3001（三进制状压）

    题目 解法 看到这道题,我们就会想到旅行商问题.但是这里每一个点可以经过最多两次,所以我们用三进制表示就好了. 代码 #include <iostream> #include <cs ...

  2. 学习EXTJS6（6）基本功能-工具栏和菜单

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  3. linux下Qt程序编译运行

    Qt程序编译运行很简单,利用Qt提供的qmake工具可以很好的进行编译,在命令行输入一下编译过程:qmake -project    //声称项目文件(*.pro)qmake              ...

  4. 【ACM】hdu_1094_A+BVI_201307261731

    A+B for Input-Output Practice (VI)Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/3276 ...

  5. 服务器session，Tomcat有自己的session维护机制，apache有自己的session维护机制

    1.SESSION一般不是你说的这种工作方式,你打开一个浏览器,再打开一个,请求同一个网址,然后其中一个登陆,另外一个绝对不会也登陆.SESSION和浏览器本身这个程序就是挂钩的,一般不通过IP和端口 ...

  6. System v和posix的IPC对比

    之前有一篇关于共享内存的System V和Posix的对比: http://www.cnblogs.com/charlesblc/p/6261469.html POSIX(Portable Opera ...

  7. [Javascript Crocks] Create a Maybe with a `safe` Utility Function

    In this lesson, we’ll create a safe function that gives us a flexible way to create Maybes based on ...

  8. 【VC编程技巧】窗口☞3.6以渐变效果加载对话框

    平时我们常常能够看到非常多应用程序启动过程非常酷.什么百叶窗.渐变,各种效果,今天我们看一下怎样在程序中添加这样的效果. 一.演示样例展示: watermark/2/text/aHR0cDovL2Js ...

  9. 项目结构、包、编译为exe！

    一个java源文件里至多有一个public类,该类的名称必须与源文件名称称同样.也能够没有public类.文件名称与随意一个类名一致就可以. 包 类似于cpp的namespace,是对类的再封装,防止 ...

  10. selenium找到页面元素click没反应

    问题描述:通过调试可以看到控制台已经找到了起诉入口页面元素,可是点击“我是原告”没有反应了,也没有报错 解决办法:登录时是跳进了两层的iframe中,需要跳出iframe才能找到我是原告.