jQueryPHP实现微信转盘抽奖功能的方法.pdf

JqueryUI 作为一个优秀的前端库， 在项目中经常会用到， 下面小编抽点时间给大家介绍 jQueryUI 中的 datepicker 使用方法详解，一起看看吧 本文实例讲述了 jQuery+PHP 实现微信转盘抽奖功能的方法。分享给大家供大家参考， 具体如下： 本文结合实例将使用 jQuery 和 PHP 来实现转盘抽奖程序。 准备工作 首先要准备素材， 抽奖的界面用到两张图片， 圆盘图片和指针图片， 实际应用中可以根 据不同的需求制作不同的圆盘图片。 接着制作 html 页面，实例中我们在 body 中加入如下代码： lt;div class=demogt; nbsp; lt;div id=diskgt;lt;/divgt; nbsp; lt;div id=startgt;lt;img src=start.png id=startbtngt;lt;/divgt; lt;/divgt; 我们用 #disk 来放置圆盘背景图片，在 css 中控制，用 #start 来放置指针图片 start.png 。 然后我们使用 CSS 来控制指针和圆盘的位置，代码如下： 复制代码 代码如下 : .demo{width:417px; height:417px; position:relative; margin:50px auto} #disk{width:417px; height:417px; background:url(disk.jpg) no-repeat} #start{width:163px; height:320px; position:absolute; top:46px; left:130px;} #start img{cursor:pointer} jQuery 要想让指针转动起来，如果不借助 flash 的话，我们可以使用 html5 的 canvas 实现图片 的旋转，但是需要考虑浏览器兼容性，而一款 jQuery 插件完全可以实现图片（任意 html 元 素）旋转并兼容各大浏览器，它就是 jQueryRotate.js 。 使用 jQueryRotate.js 可以将图片旋转任意角度， 可以绑定鼠标事件， 可以设置旋转过程 动画效果以及 callback 回调函数。 使用方法当然是先在 head 中载入 jquery 库文件以及 jQueryRotate.js ，然后我们使用以下 代码就可以实现指针转动了。 $(function(){ nbsp; $(#startbtn).rotate({ nbsp; nbsp; bind:{ nbsp; nbsp; nbsp; click:function(){// 绑定 click 单击事件 nbsp; nbsp; nbsp; nbsp; nbsp;var a = Math.floor(Math.random() * 360); // 生成随机 数 nbsp; nbsp; nbsp; nbsp; nbsp;$(this).rotate({ nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;duration:3000,// 转动时间间隔（转动 速度） nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; nbsp;angle: 0, // 开始角度 nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; animateTo:3600+a, // 转动角度， 10 圈+ nbsp; nbsp; nbsp; nbsp; nbsp; nbsp; easing: $.easing.easeOutSine, // 动画扩展