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

最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “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 = PHP传来的角度 +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圈
            //因为每次执行动画后CSS3中rotate()的值是保存的，如果不增加一定得角度，则将在PHP返回的角度内转动，即360度以内转动

            a += 1080;

            //动画效果为2S，动画播放完执行弹窗效果

            setTimeout(slideFunction,2000);

            function slideFunction(){

                var con = confirm('恭喜你，中得'+p+'\n还要再来一次吗？');

                if(con){

                    lottery();

                }else{

                    return false;

                }

            }

        }

    });

}

由于是自学JS，写的并不精简.. 只为实现想法的效果罢了。见谅！

下载地址：http://pan.baidu.com/s/1ntiCaKx

作者：Margo_test
出处：http://www.cnblogs.com/margo/

欢迎分享与转载。

秒客网

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

相关文章