jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)


Posted in Javascript onJanuary 16, 2013

网上发现一个很有意思的jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。

调用和方法:

rotate(angle)

angle参数:[Number] ? 默认为 0 ? 根据给定的角度旋转图片

例如:

$("#img").rotate(45);

rotate(parameters)

parameters参数:[Object] 包含旋转参数的对象。支持的属性:
1.angle属性:[Number] ? default 0 ? 旋转的角度数,并且立即执行
例如: 
$("#img").rotate({angle:45});

2.bind属性:[Object] 对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用- $(this).rotate(…)。例如 (click on arrow):
$("#img").rotate({bind:{ click: function(){ 
$(this).rotate({ 
angle: 0, 
animateTo:180 
}) 
} 
} 
});

3.animateTo属性:[Number] ? default 0 ? 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。
4.duration属性:[Number] ? 指定使用animateTo的动画执行持续时间例如 (click on arrow):
$("#img").rotate({bind:{ 
click: function(){ 
$(this).rotate({ 
duration:6000, 
angle: 0, 
animateTo:100 
}) 
} 
} 
});

5.step属性:[Function] ? 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
6.easing属性:[Function] ? 默认 (see below) ? Easing function used to make animation look more natural. It takes five parameters (x,t,b,c,d) to support easing from http://gsgd.co.uk/sandbox/jquery/easing/ (for more details please see documentation at their website). Remember to include easing plugin before using it in jQueryRotate!Default function:
function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }

Where:t: current time,
b: begInnIng value,
c: change In value,
d: duration,
x: unused
No easing (linear easing):
function(x, t, b, c, d) { return (t/d)*c ; }

Example (click on arrow):
$("#img").rotate({bind:{ 
click: function(){ 
$(this).rotate({ 
angle: 0, 
animateTo:180, 
easing: $.easing.easeInOutElastic 
}) 
} 
} 
});

7.callback属性:[Function] 动画完成时执行的回调函数例如 (click on arrow):
$("#img").rotate({bind:{ 
click: function(){ 
$(this).rotate({ 
angle: 0, 
animateTo:180, 
callback: function(){ alert(1) } 
}) 
} 
} 
});

getRotateAngle

这个函数只是简单地返回旋转对象当前的角度。

例如:

$("#img").rotate({ 
angle: 45, 
bind: { 
click : function(){ 
alert($(this).getRotateAngle()); 
} 
} 
});

stopRotate

这个函数只是简单地停止正在进行的旋转动画。

例如:

$("#img").rotate({ 
bind: { 
click: function(){ 
$("#img").rotate({ 
angle: 0, 
animateTo: 180, 
duration: 6000 
}); 
setTimeout(function(){ 
$("#img").stopRotate(); 
}, 1000); 
} 
} 
});

用这个可以实现很多关于旋转的网页特效,我用这个做了个抽奖大转盘,效果不错,就是没flash顺畅,基本能跑哈哈。

jqueryrotate项目地址:http://code.google.com/p/jqueryrotate/

代码示例:http://code.google.com/p/jqueryrotate/wiki/Examples

一步一步往上爬

Javascript 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
快速解决jQuery与其他库冲突的方法介绍
Jan 02 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
Highcharts入门之简介
Aug 02 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 jQuery
vuejs简单验证码功能完整示例
Jan 08 Javascript
Vue formData实现图片上传
Aug 20 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
JS数组扁平化、去重、排序操作实例详解
Feb 24 Javascript
vue 自定义的组件绑定点击事件
Apr 21 Vue.js
用JS提交参数创建form表单在FireFox中遇到的问题
Jan 16 #Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 #Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 #Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 #Javascript
JQuery验证工具类搜集整理
Jan 16 #Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 #Javascript
js拦截alert对话框另类应用
Jan 16 #Javascript
You might like
基于AppServ,XAMPP,WAMP配置php.ini去掉警告信息(NOTICE)的方法详解
2013/05/07 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
php时间函数用法分析
2016/05/28 PHP
php 猴子摘桃的算法
2017/06/20 PHP
php实现每日签到功能
2018/11/29 PHP
laravel model模型处理之修改查询或修改字段时的类型格式案例
2019/10/17 PHP
判断是否输入完毕再激活提交按钮
2006/06/26 Javascript
XP折叠菜单&仿QQ2006菜单
2006/12/16 Javascript
js left,right,mid函数
2008/06/10 Javascript
jquery 选择器部分整理
2009/10/28 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
轻松创建nodejs服务器(10):处理上传图片
2014/12/18 NodeJs
JQuery中clone方法复制节点
2015/05/18 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
2016/05/12 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
2017/06/09 Javascript
vuex实现像调用模板方法一样调用Mutations方法
2019/11/06 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
浅谈python中的数字类型与处理工具
2017/08/02 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
Python 列表的清空方式
2020/01/13 Python
pandas 数据类型转换的实现
2020/12/29 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
人事专员的职责
2014/02/26 职场文书
小学生安全演讲稿
2014/04/25 职场文书
演讲稿格式
2014/04/30 职场文书
世界遗产的导游词
2015/02/13 职场文书
大学生个人简历自荐信
2015/03/06 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android