最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “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; //声明一个数值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
欢迎分享与转载。
纯css3配合vue实现微信语音播放效果
前言 每次写点东西都扯两句-0-,这几天一半精力放在移动端,一半维护之前的项目.书也少看了,不过还好依旧保持一颗学习的心.对于css3我是之前有专门整理过的,因此对于原理之前也算了解.今天是项目中遇到 ...
JS:九宫格抽奖转盘实例
工作需要,所以做了个抽奖转盘的插件,当然这里只做最简单的演示.可以用于取代一些flash抽奖程序. 机制说明: 1.通过定义lottery-unit来控制节点的个数及索引: 2.通过设置lottery ...
jquery+js实现鼠标位移放大镜效果
jQuery实现仿某东商品详情页放大镜效果 用jquery+js实现放大镜效果,效果大概如下图! 效果是不是大家很感兴趣,放大镜查看细节,下边大家可以详细看一看具体是怎么实现的.下边直接看代码! HT ...
css3+jquery+js做的翻翻乐小游戏
主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: