最近想起了刚接到这个项目时第一时间脑海里迸出的解决方法 “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代码

&lt ...

一个 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;/*防止第一个子元素 ...

微信html抽奖转盘代码,使用CSS3+jquery.js 实现微信抽奖转盘效果相关推荐

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

    [Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果 0 2014-03-19 02:00:24 上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑 ...

  2. 导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果

    本文实例讲述了基于CSS3实现的黑色个性导航菜单效果.分享给大家供大家参考.具体如下: 黑色个性的CSS3导航菜单,竖直排列的菜单,基本原理与横向的区别并不大,适合学习CSS. 运行效果截图如下: 在 ...

  3. 页面展开收起php代码,纯CSS3实现移动端展开和收起效果的示例代码

    本文介绍了纯CSS3实现移动端展开和收起效果的示例代码,分享给大家,具体如下: 展示效果: HTML代码 展开 收起 唧唧复唧唧,木兰当户织.不闻机杼声,惟闻女叹息.(惟闻 通:唯)问女何所思,问女何 ...

  4. js微信抢红包脚本代码_基于Auto.js的微信红包监测

    前段时间接触了下Auto.js(https://github.com/hyb1996/Auto.js),很好上手而且挺有意思,于是写了个微信红包监测脚本 大概思路是,不断获取手机屏幕截图,发现新消息则 ...

  5. snowfall.jquery.js实现页面飘花效果

    效果图如下:录制gif的时候有点问题,清晰度大家不用在意哈 引入第三方js: 大家可以去官网下载,或者点这自取:https://download.csdn.net/download/tt1847348 ...

  6. css3+jquery+js做的翻翻乐小游戏

    主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: 1 <div class="containe ...

  7. asp源码爱好者福利,asp调用微信扫一扫代码,用asp写的调用微信内置扫一扫功能源码下载

    接到一个用户的需求,要在他的手机版网页里实现扫一扫功能,扫出他的产品编号入库,这太简单了,花了几分种时间给他实现一下. 微信扫一扫必须使用微信内置浏览器访问此页面才能查看效果: 程序功能: 通过微信J ...

  8. js框架jquery实现的幸运大转盘抽奖程序代码,兼容多种浏览器(Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Chrome)

    博客目录 js框架jquery实现的幸运大转盘抽奖程序代码 实现功能截图 系统功能 使用技术 代码 写在最后 js框架jquery实现的幸运大转盘抽奖程序代码 本系统实现了一个幸运转盘抽奖,兼容多种浏 ...

  9. 公众号 菜单 代码 php,如何使用Vue.js实现微信公众号菜单编辑器（案例代码）

    这次给大家带来如何使用Vue.js实现微信公众号菜单编辑器(案例代码),使用Vue.js实现微信公众号菜单编辑器的注意事项有哪些,下面就是实战案例,一起来看一下. 实现菜单删除方法 在vue实例中添加 ...

最新文章

  1. 今天清华学长手把手带你做UI自动化测试
  2. 苹果系统怎么降低版本_1903、1809...到底怎么看系统版本？
  3. 将一张表里的数据转换为json字符串
  4. C语言编写Scheme解释器,C语言编写logo语言解释器 ，求高手指导
  5. JVM（2）——JVM类加载机制
  6. c++二进制转十进制_二进制，八进制，十进制，十六进制转换详解~
  7. Perl正则表达式匹配
  8. 我寫的JAVA記事本源程序
  9. python测试笔试题1
  10. centos普通用户修改文件权限_Linux CentOS更改文件的权限与用户及用户组管理命令...
  11. oracle sql2000,sql2000的代码改成oracle的
  12. 云ecs服务器自动重启,云服务器需要定时重启吗?服务器进行重启的原因是什么?...
  13. 6.18-WizNote MD 指南
  14. 计算机中word音乐符号在哪里找,word音乐符号怎么打出来|word音乐符号怎么打
  15. LDA模型原理学习及应用
  16. 怎样在你的团队做 Code Review ?
  17. windows资源管理器经常出现无响应 window语言栏不见了
  18. win10cmd计算机管理界面,win10系统如何CMD中进行电脑关机/重启
  19. 21个令程序员泪流满面的瞬间 ...
  20. 公钥证书的颁发和使用

热门文章

  1. python计算差商_Python实现牛顿插值法(差商表)
  2. React Profiler Chrome Tool
  3. python中PIL的安装参考教程
  4. com.google.gson.JsonArray JsonObject JsonParser
  5. golang前后端分离框架
  6. 前后端分离框架跨域问题解决
  7. 若依前后端分离框架——初始化参数功能源码学习
  8. InnoSetup制作补丁包替换文件操作
  9. ES迁移到OpenSearch
  10. 利用js制作html table分页示例(js实现分页)