使用CSS3+jquery.js 实现微信抽奖转盘效果

当前位置 : 首页 > 网页制作 > CSS > 使用CSS3+jquery.js 实现微信抽奖转盘效果

使用CSS3+jquery.js 实现微信抽奖转盘效果

来源: 作者: 时间:2016-01-25 10:02
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 CSS3!为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果。并不需要依赖jquery的动画效果插件,旋转角度插件。不
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”!
 
为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果。并不需要依赖jquery的动画效果插件,旋转角度插件。
 
不废话 贴:
 
PS:该动画不支持IE10及以下(11没测 应该也不支持,想要全兼容访问jquery版本-详见第一行连接),其他测试可用。UC,微信内核测试可用。
 
(DEMO附件在下方,需wamp环境。)
 
 
 
<!--最基本的结构-->  
 <div class="demo">
        <img id="disk" src="disk.jpg" />
        <img src="start.png" id="startbtn" class="start done">
 </div>
 
 
复制代码
/*负责动画效果的CSS*/
.done{
    -webkit-transition: 2s ease;
    -moz-transition:2s ease;
    -o-transition:2s ease;
    transition:2s ease;
}
复制代码
复制代码
$(function(){ 
     $("#startbtn").click(function(){ 
        lottery()                     //点击执行函数ajax
    }); 
}); 
var a = 0;                            //声明一个数值a
function lottery(){ 
    $.ajax({ 
        type: 'POST', 
        url: 'json.php', 
        dataType: 'json', 
        cache: false, 
        error: function(){ 
            alert('出错了!'); 
            return false; 
        }, 
        success:function(json){         
            //角度  b = 传来的角度 +720(为了保证动画不会太快停止 先转两圈)+ 声明的数值a
            var b = json.angle+720+a; 
            //奖项 
            var p = json.prize;
            //点击之后才能运行动画,所以必须动态加载style 两个值为了兼容chrome & firefox & safair
            document.getElementById('startbtn').setAttribute("style","-webkit-transform: rotate("+b+"deg);transform: rotate("+b+"deg)")
            //每次执行完通过a使下次多转3圈
            //因为每次执行动画后3中rotate()的值是保存的,如果不增加一定得角度,则将在PHP返回的角度内转动,即360度以内转动
 
            a += 1080;
            //动画效果为2S,动画播放完执行弹窗效果
            setTimeout(slideFunction,2000);
            function slideFunction(){
                var con = confirm('恭喜你,中得'+p+'\n还要再来一次吗?'); 
                if(con){ 
                    lottery(); 
                }else{ 
                    return false; 
                }
            }
        } 
    });
}
Tag:
网友评论

<