ajax jquery 轮盘旋转抽奖无动画效果,该如何解决

ajax jquery 轮盘旋转抽奖无动画效果

本帖最后由 gy127132060 于 2014-03-20 15:53:06 编辑

html中的body：



<!--真正需要的效果-->

<div class="demo"> 

	<div id="disk"></div> 

	<div id="start"><img src="./img/turntable/2.png" id="startbtn" 

			style="-webkit-transform: rotate(231deg); -webkit-transform-origin: 50% 50%;"></div> 

</div> 

<!-- 用于实验的效果-->

<div class="demo"> 

	 <div id="start2"><img src="./img/turntable/2.png" id="startbtn2" 

			style="-webkit-transform: rotate(231deg); -webkit-transform-origin: 50% 50%;"></div> 

</div>

导入的相关js



		<script type="text/javascript" src="./jQuery/jquery-1.9.1.min.js"></script>

		<script type="text/javascript" src="./jQuery/jQueryRotate.js"></script>

		<script type="text/javascript" src="./jQuery/jquery.masonry.min.js"></script>

		<script type="text/javascript" src="./jQuery/jquery.easing.min.js"></script>

		<script type="text/javascript" src="./js/json2.js"></script>

用于实验部分的页面脚本代码



		$(function(){

			//alert('into function'); 

		    $("#startbtn2").rotate({ 

		        bind:{ 

		            click:function(){//绑定click单击事件 

		            	//alert('into click'); 

		                 var a = Math.floor(Math.random() * 360); //生成随机数 

		                 $(this).rotate({ 

		                         duration:6000,//转动时间间隔（转动速度） 

		                         angle: 0,  //开始角度 

		                        animateTo:3600+a, //转动角度，10圈+ 

		                        easing: $.easing.easeOutSine, //动画扩展 

		                        callback: function(){ //回调函数 

		                            alert("中奖了!"); 

		                        } 

		                 }); 

		            } 

		        } 

		    }); 

		});

这部分可正常执行动画效果。

真正需要部分的页面脚本代码



		$(document).ready(function(){

			$("#startbtn").bind("click",function(){

				gogo();

			});

		}); 


		function gogo(){

			var urlStr="Turntable.do"; 

			//alert("ajax");

			$.ajax({

				type:"POST", //提交數據的類型

				url:urlStr, //提交請求的地址

				dataType:"json", //返回的數據格式

				cache:false,


				error:function(){

					alert("error");

					return false;

				},

				success:function(data){succ(data);}

			});

		}


		function succ(data){

			//alert('success'+data);

			$("startbtn").unbind("click").css("cursor","default");

			var a = data.angle;	//角度

			var p = data.prize;	//獎項

			var msg = data.msg; //提示信息

			alert("a:"+a+";p:"+p+";m:"+msg);

			$("startbtn").rotate({

				duration:4000, //轉動時間

				angle:0,

				animateTo:3600+a, //轉動角度

				easing: $.easding.easeOutSine,

				callback:function(){

					alert("這裡是回調函數");

					var con = confirm("恭喜您,中得"+p+"\n還要再來一次嗎?");

					if(con){

						alert("into");

					}else{

						return false;

					}

				}

			})

		}

代码直至运行到succ方法中的alert部分都正常,alert的返回数据类似 a:33;p:4;m:继续努力继续运行页面无动画效果。

运用Google浏览器查看Js脚本运行情况如图：

ajax jquery 轮盘旋转抽奖无动画效果,该如何解决

相关推荐