微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果
最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “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结构:
用CSS3 &; jQuery创建apple TV海报视差效果
用CSS和jQuery来实现它,尽量看起来和原效果一样. 最终效果图 本教程里,我将使用CSS,HTML和jQuery来创建一个近似Apple TV视差效果,如果你正在阅读,我假设你对上述三种技术都有 ...
Html5-Canvas实现简易的抽奖转盘
###Html5实现抽奖转盘效果 1.实现的基本效果 2.主要的内容 html5中canvas标签的使用 jQueryRotate.js旋转插件 3.主要html代码
< ...一个 div 手写红绿灯- 分别用css3 和 js 实现
[要求] 一个div,配合 css3 或者 js 实现红绿灯切换的效果. [思路] 使用 css3,要实现红绿灯颜色的变换必然要用到 animation 动画,通过 keyframes 控制颜色的渐变 ...
jquery实现抽奖转盘
用jquery通过配置参数实现抽奖转盘 1.html代码
...随机推荐
System.Security.Cryptography.CryptographicException，密钥集不存在
非常感谢,已经解决了.是当前用户没有权限访问证书的私钥文件的问题,之前尝试去解决,但是在对:C:\Documents and Settings\All Users\Application Data\M ...
北大ACM题库习题分类与简介(转载)
在百度文库上找到的,不知是哪位大牛整理的,真的很不错! zz题 目分类 Posted by fishhead at 2007-01-13 12:44:58.0 -------------------- ...
homework-05
经过这几天的深思熟虑我和小明同学将这次作业基本的完整了,可能界面略丑陋,但是基本功能均已实现.我们的服务器端采用python编写,因为服务器端是这次作业的难点,而python中有一个叫做web.py的 ...
Linux命令ln的使用
ln是linux中一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个链接,这个命令最常用的参数是-s,具体用法是:ln –s 源文件 目标文件. 当我们需要在不同的目录,用到相同的文件时, ...
关于Git和SVN的对比
1.git的提交是一个DAG有向无欢图.可以看到哥哥分支之间的合并关系.SVN的提交是一条直线. 2.git的提交版本号不是一个简单递增的数字,而是一个长达40位的十六进制数字(哈希值) 但是可以适用 ...
vs2010中socket链接错误LINK2019
解决方法参考下面链接: http://blog.163.com/strive_only/blog/static/893801682009225112354746/
python---哈希算法实现
# coding = utf-8 class Array: def __init__(self, size=32, init=None): self._size = size self._items ...
linux /dev/mapper/centos-root目录莫名其妙被占满
shell命令df -h查看磁盘占用情况,发现/dev/mapper/centos-root莫名其妙被沾满: 这是因为,系统有文件被删除,而进程还活着,因而造成还占用空间的现象.1.使用lsof |g ...
【转载】uCOS2 关于进程调度的O(1)算法
uCOS2唯一值得学习的一个地方就是关于进程调度的O(1)算法: 最简单也是最愚蠢的方法是维护一个链表List. 这种方法的问题是:当一个Thread就绪时,如果根据其优先级插入List,则算法的时间 ...
Bootstrap-媒体查询-屏幕大小
.container{padding:0 15px; margin:0 auto;} .container:before{ content: ''; display: table;/*防止第一个子元素 ...