您的位置:阿里西西 > 前端技术 > HTML5教程 > 详细内容

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

  本站整理   互联网   2014-03-24   点击:   我要评论

为什么不能用CSS3来实现呢? 所以我打算用CSS3来实现这个效果。并不需要依赖jquery的动画效果插件,旋转角度插件。

不废话 贴源码:

PS:该动画不支持IE10及以下(11没测 应该也不支持,想要全兼容访问jquery版本-详见第一行连接),其他浏览器测试可用。UC,微信内核测试可用。

(DEMO附件在下方,需wamp环境。)

 

<!--最基本的结构--> 
 <div class="demo">
        <img id="disk" src=http://www.update8.com/Web/CSS3/"disk.jpg" />
        <img src=http://www.update8.com/Web/CSS3/"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



更多关于 的文章
会员评论所有会员评论

  

相关排行总榜

网页教程

站长文章

特效排行