[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果

0 2014-03-19 02:00:24

上次发表了一篇 微信抽奖转盘活动-效果源码分析

最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “CSS3”!

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

不废话 贴源码：

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

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

/*负责动画效果的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; //声明一个数值afunction 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/

欢迎分享与转载。

本文网址：http://www.shaoqun.com/a/86192.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

JS

0