最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jquery实现转盘抽奖功能的教程
时间：2017-01-07 编辑：简简单单 来源：一聚教程网
实现这个其实蛮简单的，转动的效果用的jqueryRotate插件，所以只要判断每个奖荐对应的角度，然后设置指针的转动角度就可以了。比如关键的是jqueryRotate这个插件的用法。
jqueryRotate的资料：
支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高级浏览器下使用Transform，低版本ie使用VML实现
google code地址：http://code.google.com/p/jqueryrotate/
调用和方法：
| 代码如下 | 复制代码 |
|
$(el).rotate({
angle:0,//起始角度
animateTo:180,//结束的角度
duration:500，//转动时间
callback:function(){},//回调函数
easing: $.easing.easeInOutExpo//定义运动的效果，需要引用jquery.easing.min.js的文件
})
$(el).rotate(45);//直接这样子调用的话就是变换角度
$(el).getRotateAngle();//返回对象当前的角度
$(el).stopRotare();//停止旋转动画
| |
另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。
很简单吧，各种example可以看这里：http://code.google.com/p/jqueryrotate/wiki/Examples
下面是用jqueryRotate实现的抽奖转盘页面：
| 代码如下 | 复制代码 |
|
| |
相关文章
- jquery对象与DOM对象转化 03-23
- jquery实现九宫格大转盘抽奖源码 11-13
- DOM对象和jQuery对象的转换与区别 01-05
- jQuery与DOM对象的互相转换的例子 12-18
- jQuery对象与dom对象的转换 07-24
- jQuery 3D旋转式国外产品展示特效 09-09