项目中，在充值流程中，加入了1个抽奖环节，需要转盘显示抽中的虚拟货币。网上找了相关的特效，最后锁定在这个特效上：http://www.jb51.net/jiaoben/319636.html。因为用的是jquery实现的，项目中有引入jquery，不用添加新的js库就很方便的实现。

整个流程是：用户支付完成后，后台随机产生抽中的数字，传到转盘页面。转盘页面只是负责动态的显示后台产生的数字（而不是页面产生随机数）。那好，前端的工作就变成了接收一个数字，我们这里假定是三位的，两位的数字后端传过来的时候百位上就补零了，如：85补成085；前端负责动态的显示085就醒了。

UI效果图：

修改下下来的代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title>充值抽奖</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <meta name="apple-mobile-web-app-capable" content="yes">
  8.     <meta name="apple-mobile-web-app-status-bar-style" content="black">
  9.     <meta name="format-detection" content="telephone=no">
  10.     <link rel="stylesheet" href="../../assets/css/amazeui.min.css?v=1.0">
  11.     <link rel="stylesheet" href="../../assets/css/style1.css?v=1.0">
  12.     <link rel="stylesheet" href="../../assets/css/index.css?v=1.0">
  13.     <style>
  14. input, button, select, textarea, a:fouse {outline:none}
  15. li {list-style:none;}
  16. img {border:none;}
  17. textarea {resize:none;}
  18. body {margin:0;font: 12px "微软雅黑"; background: #feecd4;}
  19. /* === End CSS Reset ========== */
  20.  
  21. body{
  22.     _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<950?"950px":"");
  23. }
  24. a{
  25.     text-decoration: none;
  26. }
  27. .clearfix:after {
  28.     visibility: hidden;
  29.     display: block;
  30.     font-size: 0;
  31.     content: " ";
  32.     clear: both;
  33.     height: 0;
  34. }
  35. .clearfix{*zoom:1;}
  36.  
  37. .container{
  38.     width:100%;
  39.     margin: 0 auto;
  40.     position: relative;
  41.     /*height: 198px;*/
  42. }
  43.  
  44. /* 头部 */
  45. /*.main{
  46.     background: url("images/main.jpg") no-repeat center;
  47.     background: #feecd4;
  48.     height: 351px;
  49.     _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
  50. }*/
  51. .main2{
  52. 	margin:0 auto;
  53.     background: url("../../assets/images/activities/main2-1.png") no-repeat center;
  54. 	width:300px;
  55. 	height:300px;
  56. 	background-size:300px 300px;
  57.     /*最小宽度*/
  58. }
  59. .main3{
  60.     /*background: url("images/main3.jpg") no-repeat center;
  61.     height: 381px;*/
  62.     _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");
  63. }
  64. .main3-text{
  65.     color:#744b00;
  66.     font-size: 23px;
  67.     font-weight: bold;
  68.     position: absolute;
  69.     left: 74px;
  70.     top: 210px;
  71. }
  72. .main3-text2{
  73.     color:#744b00;
  74.     font-size: 14px;
  75.     position: absolute;
  76.     left: 74px;
  77.     top: 254px;
  78.     line-height: 22px;
  79.     width: 867px;
  80. }
  81. .main-text{
  82.     position: absolute;
  83.     left: 360px;
  84.     top: 325px;
  85.     color:#b03b01;
  86.     font-size: 16px;
  87. }
  88. .main2-text1{
  89.     position: absolute;
  90.     left: 79px;
  91.     top: 45px;
  92.     color:#ffffff;
  93.     font-size: 16px;
  94. }
  95. .main2-text2{
  96.     position: absolute;
  97.     left: 69px;
  98.     top: 67px;
  99.     color:#ffffff;
  100.     font-size: 23px;
  101.     font-weight: bold;
  102. }
  103. .main2-text2 span{
  104.     color:#ffff00;
  105. }
  106. .main2-text3{
  107.     position: absolute;
  108.     left: 69px;
  109.     top: 97px;
  110.     color:#ffffff;
  111.     font-size: 18px;
  112. }
  113. .main2-text4{
  114.     position: absolute;
  115.     left: 382px;
  116.     top: 34px;
  117.     color:#ffffff;
  118.     font-size: 18px;
  119. }
  120. .main2-text4 span{
  121.     color:#ffe700;
  122.     font-weight: bold;
  123. }
  124. .main2-text5{
  125.     position: absolute;
  126.     left: 665px;
  127.     top: 34px;
  128.     color:#ffffff;
  129.     font-size: 18px;
  130. }
  131. .main2-text5 span{
  132.     color:#ffe700;
  133.     font-weight: bold;
  134. }
  135. .num{
  136.     position: absolute;
  137.     left: 30px;
  138.     top: 95px;
  139.     width: 72px;
  140.     height: 112px;
  141.     overflow: hidden;
  142. }
  143. .num-con{
  144.     position: relative;
  145.     top:-724px;
  146. }
  147. .num-img{
  148.     background: url("../../assets/images/activities/num-1.png") no-repeat;
  149.     width: 72px;
  150.     height: 744px;
  151.     margin-bottom: 4px;
  152. }
  153. .num2{
  154.     left: 114px;
  155. }
  156. .num3{
  157.     left: 198px;
  158. }
  159.  
  160. .main3-btn{
  161.     width: 307px;
  162.     height: 95px;
  163.     position: absolute;
  164.     left: 313px;
  165.     top: -290px;
  166.     cursor: pointer;
  167. }
  168. </style>
  169. </head>
  170. <body class="bg-home" style="">
  171. </header>
  172. <body>
  173. <section class="activities">
  174. 	<div class="am-padding-sm text-center font-16 content1" style="padding-top:1.5rem;">
  175.     	<img style="width:100%;"src="../../assets/images/activities/word-2.png"/>
  176.        	<div class="font-16 font-bold" style="left:53%;bottom:10%;position:absolute;color:#fff601">200-800</div>
  177.     </div>
  178.  
  179.     <!--转盘-->
  180.     <div style="margin-top:6%;">
  181.     	<div class="main2">
  182. 	<div class="container">
  183. 		<div class="num num1">
  184. 			<div class="num-con num-con1">
  185. 				<div class="num-img"></div>
  186. 				<div class="num-img"></div>
  187. 			</div>
  188. 		</div>
  189. 		<div class="num num2">
  190. 			<div class="num-con num-con2">
  191. 				<div class="num-img"></div>
  192. 				<div class="num-img"></div>
  193. 			</div>
  194. 		</div>
  195. 		<div class="num num3">
  196. 			<div class="num-con num-con3">
  197. 				<div class="num-img"></div>
  198. 				<div class="num-img"></div>
  199. 			</div>
  200. 		</div>
  201. 	</div>
  202. </div>
  203.     <!--点击抽奖按钮-->
  204.     <div  style="margin:5% auto 0 auto;width:250px;" id="lottery">
  205.     	<img style="width:100%;" src="../../assets/images/activities/lottery.png"/>
  206.     </div>
  207.     <!--返回个人中心-->
  208.      <div  style="margin:5% auto 0 auto;width:250px;" id="lottery">
  209.     	<img style="width:100%;" src="../../assets/images/activities/personal.png"/>
  210.     </div>
  211.     <!--蒙版图层-->
  212.     <section>
  213.    	<div id="masking-bg">
  214.     </div>
  215.     <div id="masking-layer">
  216.  
  217.         <div class="masking-banner" onclick="" style="width:270px;left:50%;top:20%; margin-left:-135px;">
  218.         	<img class="img-bg" src="../../assets/images/activities/lottery-notice.png"/>
  219.             <div class="font-25 font-white" style="top:64%;">X<span id="money">500</span></div>
  220.             <div style="width:200px;position:absolute;z-index:2000;bottom:0;left:50%; margin-left:-100px;padding-top:8%;" onclick="window.location.href=''">
  221.             	<img  style = "width:100%;"src="../../assets/images/activities/lixy.png"/>
  222.             </div>
  223.             <div  class="close1" onclick="closeMasking()" style="width:40px;left:230px;top:0;">
  224.        			<img  style="width:100%;" src="../../assets/images/common/X-1.png"/>
  225.         	</div>
  226.         </div>
  227.      </div>
  228.     </section>
  229.  
  230. </section>  
  231.  
  232. <script src="../../assets/js/jquery.min.js"></script>
  233. <script>
  234. 	//设置body高度等于手机屏幕高度
  235. 	$(".activities").height($(window).height());
  236. </script>
  237. <script type="text/javascript">
  238. 	$("#lottery").click(function () {
  239. 			reset();
  240. 			letGo();
  241. 	});
  242.  
  243. 	var flag=false;
  244. 	var index=0;
  245. 	var TextNum1
  246. 	var TextNum2
  247. 	var TextNum3
  248.  
  249. 	//后台传来的随机的金额，数字字符串格式
  250. 	var money = "341";
  251. 	function letGo(){
  252.  
  253. 		TextNum1=money[0];
  254. 		TextNum2=money[1];
  255. 		TextNum3=money[2];
  256. 		//位置数组 比如arr[0]就是0所在的位置
  257. 		var arr= [-724,-798.4,-872.8,-947.2,-1021.6,-1096,-1170.4,-1244.8,-1319.2,-646.3];
  258. 		//百位
  259. 		var num1=arr[TextNum1];//在这里随机
  260. 		var num2=arr[TextNum2];
  261. 		var num3=arr[TextNum3];
  262.  
  263. 		//百位
  264. 		function do1(){
  265. 		$(".num-con1").animate({"top":-1140},1500,"linear", function () {
  266. 			$(this).css("top",0).animate({"top":num1},1500,"linear");
  267. 			setTimeout(function(){showMasking(money)},2000);
  268. 		});
  269.  
  270. 		}
  271.  
  272. 		//十位
  273. 		function do2(){
  274. 		$(".num-con2").animate({"top":-1140},1000,"linear", function () {
  275. 			$(this).css("top",0).animate({"top":num2},1000,"linear");
  276. 		});
  277. 		}
  278.  
  279. 		//个位
  280. 		function do3(){
  281. 		$(".num-con3").animate({"top":-1492},500,"linear", function () {
  282. 			$(this).css("top",0).animate({"top":num3},500,"linear");
  283. 		});
  284. 		}
  285. 		setTimeout(do3,0);
  286. 		setTimeout(do2,0);
  287. 		setTimeout(do1,0);
  288. 	}
  289.  
  290. 	function reset(){
  291. 		$(".num-con1,.num-con2,.num-con3").css({"top":-724});
  292. 	}
  293.  
  294. 	$('#masking-layer').height($(window).height());
  295.     function showMasking(text){
  296. 		$('#masking-bg').css('display','block');
  297. 		$('#masking-layer').css('display','block');
  298. 		$('#money').text(text)
  299.     }
  300.  
  301. 	function closeMasking(){
  302. 		$('#masking-bg').css('display','none');
  303. 		$('#masking-layer').css('display','none');
  304.     }
  305.  
  306. </script>
  307. </script>
  308. </body>
  309. </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. Windows 环境下使用 GCC

    安装 1.下载 min-gw 安装程序,链接为:http://sourceforge.net/projects/mingw/files/,下载 Download mingw-get-setup.exe ...

  2. 使用SQLAlchemy对博客文章进行分页

    https://blog.csdn.net/hyman_c/article/details/54382161

  3. Mysql学习总结（12）——21分钟Mysql入门教程

    21分钟 MySQL 入门教程 目录 一.MySQL的相关概念介绍 二.Windows下MySQL的配置 配置步骤 MySQL服务的启动.停止与卸载 三.MySQL脚本的基本组成 四.MySQL中的数 ...

  4. 于工具类中@Autowired注入为NULL的问题记录

      记录:在实体类中加入@Component注解和@Autowired注解时Service不能注入成功. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ...

  5. mysql-windows修改root密码

    安装mysql完成后 直接进入方式 mysql -u root -p 设置mysql的root密码 mysql -u root -p password 8888

  6. hdu - 4920 - Matrix multiplication（缓存优化+开挂）

    题意:求两个n x n的矩阵相乘后模3的结果,n <= 800. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4920 -->>呀呀 ...

  7. Python查询数据库，中文的结果显示不出来

    表里面的数据: 问题:查询数据库,返回结果不是中文可以,是中文的话就报错UnicodeEncodeError: 'gbk' codec can't encode character '\xd4' in ...

  8. 不使用系统自带的button

    // //  LKTitleBtn.m //  01-彩票 // //  Created by Lenny  on 3/17/15. //  Copyright (c) 2015 Lenny. All ...

  9. oc22--多态

    // // Animal.h #import <Foundation/Foundation.h> @interface Animal : NSObject { int _age; } - ...

  10. 2017-3-11 leetcode 217 219 228

    ji那天好像是周六.....吃完饭意识到貌似今天要有比赛(有题解当然要做啦),跑回寝室发现周日才开始233333 =========================================== ...