来源：自学PHP网 时间：2015-04-14 14:51 作者： 阅读:次
[导读] 最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 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 = 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;
}
}
}
});
}
|
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
