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
- 粉丝: 335
- 资源: 5942
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 百度Google比拼企业文化:从硬竞争到软竞争.doc
- 华为的企业文化集中体现为它的.doc
- 华为基本法.doc
- 中国企业文化理论创新与实践.ppt
- 惠普文化.doc
- 肯德基企业文化(DOC+2页).doc
- 通用电气的企业文化和管理.doc
- 沃尔玛的企业文化.doc
- 英特尔公司企业文化建设.doc
- 张瑞敏企业文化管理箴言100句.doc
- 中国电信企业文化及人力资源管理变革.doc
- TCL的“合金式”企业文化.docx
- 中国电信企业文化宣贯培训参考教材.doc
- 伦敦的房屋数据集,伦敦房屋价格数据集(包含地址,房型,面积,年龄,售价等)
- 《学术规范与论文写作》课程论文PDF
- 【企业文化分析模型-5】Chatman的组织文化剖面图(OCP).docx