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

香蕉猪 2014-03-20 03:46:20
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脚本运行情况如图:

现在想请教为何我所需要部分的动画效果没有正常执行?,明明用于实验的部分没有任何问题呀!
...全文
460 14 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
qingyazhi2010 2014-05-19
  • 打赏
  • 举报
回复
怎么解决的啊??
23glh 2014-03-29
  • 打赏
  • 举报
回复
好啊,接分
一路记忆 2014-03-26
  • 打赏
  • 举报
回复
捞分来了,嘿嘿
wz_307 2014-03-24
  • 打赏
  • 举报
回复
转盘效果...如果是简单效果可以自己做哦~
GOLF_R20 2014-03-20
  • 打赏
  • 举报
回复
好啊,接分
liuxingfffff 2014-03-20
  • 打赏
  • 举报
回复
好热闹啊 ,我也来一脚
嘻哈大咖秀 2014-03-20
  • 打赏
  • 举报
回复
好啊,接分
zhjdg 2014-03-20
  • 打赏
  • 举报
回复
好啊,接分
香蕉猪 2014-03-20
  • 打赏
  • 举报
回复
任意回复赠分啦!
香蕉猪 2014-03-20
  • 打赏
  • 举报
回复
引用 4 楼 showbo 的回复:
实验部分你导入了下面红色的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>
没有没有,,,没有冲突。。。我在您跟朋友的帮助下,现在问题已经解决了。。。。 谢谢您的热情相助!我将在明天结贴,留出一小半的分给大家做围观奖励。其余的将全部给您!多谢!
  • 打赏
  • 举报
回复
实验部分你导入了下面红色的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>
香蕉猪 2014-03-20
  • 打赏
  • 举报
回复
感激1楼的回复,现问题
已解决

出现的新问题是:jQueryRotate.js


香蕉猪 2014-03-20
  • 打赏
  • 举报
回复
引用 1 楼 showbo 的回复:
easing: $.easing.easeOutSine, //动画扩展 easing: $.easding.easeOutSine, 感激不尽,easding真的是一个大问题!但仍没有动画效果 还有一个问题就是你的demo选择器为$("#startbtn2"),实际用的时候为$("startbtn").rotate({,绑定事件的对象对了没有?。。
绑定事件是没有问题的,我demo选择器“#startbtn2”用的是


		$(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("中奖了!"); 
		                        } 
		                 }); 
		            } 
		        } 
		    }); 
		});

这段事件脚本,这段是可以正常运行的!
  • 打赏
  • 举报
回复
easing: $.easing.easeOutSine, //动画扩展 easing: $.easding.easeOutSine, 楼猪。。。。 还有一个问题就是你的demo选择器为$("#startbtn2"),实际用的时候为$("startbtn").rotate({,绑定事件的对象对了没有?。。

52,792

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 Ajax
社区管理员
  • Ajax
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧