queryRotate 这个插件就可以实现这个功能 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/ 下面了解下这个插件怎么使用 1 $("触发转动元素").rotate(45); //直接这样子调用的话就是变换角度 2 3 $("触发转动元素").getRotateAngle(); //返回对象当前的角度 4 5 $("触发转动元素").stopRotare(); //停止旋转动画 6 7 $("触发转动元素").rotateRight() 向右旋转90度 $("触发转动元素").rotateLeft()向左旋转90度。 01 $("触发转动元素").rotate({ 02 angle:0, //起始角度 03 animateTo:180, //结束的角度 04 duration:3000, //转动时间 05 callback:function(){}, //回调函数 06 easing:$.easing.easeOutSine // $.easing.easeInOutExpo 运动的效果,需要引用jquery.easing.min.js的文件 07 }) 08 09 $("触发转动元素").rotate(45); //转动45 10 11 $("触发转动元素").getRotateAngle(); //返回对象当前的角度 12 13 $("触发转动元素").stopRotare(); //停止旋转动画 14 15 另外可以更方便的通过调用$(el).rotateRight()和$(el).rotateLeft()来分别向右旋转90度和向左旋转90度。 大转盘原理:随机出一个数字,通过后台算出在那个概率区间返回指定跳转的角度 例 一等奖 概率1% 如果在1-100 随机出100则跳转一等奖的角度范围内 二等奖 概率2% 如果在1-100 随机出99-98则跳转二等奖的角度范围内 三等奖 概率97% 如果在1-100 随机出97-1则跳转三等奖的角度范围内 下面以一个简单demo为例子 01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 02 <html xmlns="http://www.w3.org/1999/xhtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 05 <script type="text/javascript" src="jquery-1.8.0.min.js"></script> 06 <script type="text/javascript" src="jQueryRotate.2.2.js"></script> 07 <script type="text/javascript" src="jquery.easing.min.js"></script> 08 <script type="text/javascript" src="zp.js"></script> 09 <style type="text/css"> 10 body { 11 background: url(bg.png) 0 0 repeat; 12 } 13 14 .rotate-content { 15 width: 270px; 16 position: relative; 17 height: 270px; 18 background: url(activity-lottery-bg.png) 19 no-repeat 0 0; 20 background-size: 100% 100%; 21 margin: 0 auto 22 } 23 24 .rotate-con-pan { 25 background: url(disk.jpg) 26 no-repeat 0 0; 27 backgr
- 1
- 粉丝: 237
- 资源: 5943
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助