项目中，在充值流程中，加入了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. yum安装软件中的y/d/N

    yum install vim ........ 总下载量:7.0 M安装大小:23 M Is this ok [y/d/N]: d 参数解析: y:在线下载安装 d:只下载不安装 N:不安装 Bac ...

  2. 获取元素属性中的[x] 标签： javascript 2016-12-24 22:35 105人阅读 评论(0)

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

  3. vue全局使用axios的方法

    在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...

  4. Python-Pandas简单操作

    1.直接构建复杂嵌套索引 2. MultiIndex方式构建复杂的索引 多层索引操作 pandas堆叠处理

  5. react 父组件 向 子组件 传值

    父组件 import React, { Component } from 'react'; import Test from './component/test'; //声明welcome组件 cla ...

  6. 提高生产力:开源Java工具包Jodd(Java的”瑞士军刀”)

    官方网站:http://jodd.org/ 下载地址:http://jodd.org/download/index.html Jodd=tools + ioc + mvc + db + aop + t ...

  7. ZOJ 3362 Beer Problem

    Beer Problem Time Limit: 2000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...

  8. JAVA：将反射技术应用于工厂模式(Factory)和单例模式(Singleton)的简单代码

    反射技术大量用于Java设计模式和框架技术,最常见的设计模式就是工厂模式(Factory)和单例模式(Singleton). 参考URL: http://blog.csdn.net/xiaohai79 ...

  9. 哈哈，找到一种方式来简单模拟EXTJS中与服务器的AJAX交互啦。

    一直在测试客户端的EXTJS,但遇到服务器端就麻烦了,要建库,要写JSON,要有HTTP返回值. 今天测试了一个简单的方法,经过测试是OK了. 那,就是Python的SimpleHTTPServer模 ...

  10. 关于使用sudo命令后找不到JAVA_HOME的问题

    今天在虚拟机搭建zookeeper环境,结果死活运行不起来,唯一的信息只有out文件里“没有java命令”这一个提示,找来找去发现是找不到java运行环境.可是很奇怪,明明我已经配置了,而且在终端执行 ...