日期:2014-05-16  浏览次数:21069 次

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