jQuery旋转插件
jQuery旋转插件,支持Internet Explorer 6.0 + 、Firefox 2.0、Safari 3、Opera 9、Google Chrome,高级浏览器下使用Transform,低版本ie使用VML实现。调用和方法: < strong> rotate(angle) angle参数:[Number]–默认为0–根据给定的角度旋转图片例如:
$("#img").rotate(45);
rotate(parameters) parameters参数:[Object]包含旋转参数的对象。支持的属性:
- angle属性:[Number]–default 0–旋转的角度数,并且立即执行例如:
$("#img").rotate({angle:45}); - bind属性:[Object]对象,包含绑定到一个旋转对象的事件。事件内部的$(this)指向旋转对象-这样你可以在内部链式调用-$(this).rotate(…)。例如(click on arrow):
$("#img").rotate({bind:{click:function(){$(this).rotate({angle:0,animateTo:180})}}}); - animateTo属性:[Number]–default 0–从当前角度值动画旋转到给定的角度值(或给定的角度参数)例如:结合上面的例子,请参阅使用。
- duration属性: [Number]–指定使用animateTo的动画执行持续时间例如 (click on arrow) :
$("#img").rotate({
bind: {
click: function() {
$(this).rotate({
duration: 6000,
angle: 0,
animateTo: 100
})
}
}
}); - step属性: [Function]–每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数
- 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:
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})}}}); - 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)}}});
用这个可以实现很多关于旋转的网页特效。
jQuery旋转插件的更多相关文章
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- jQuery旋转插件—rotate-摘自网友
jQuery旋转插件—rotate 时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论 网上发现一个很有意思的jQuery旋转插件,支持Internet Ex ...
- jQuery旋转插件—rotate
jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...
- jQuery旋转插件jqueryrotate 图片旋转
"jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- jquery旋转插件rotate参数说明
具体可见:http://www.jianshu.com/p/b632a1ed6a57
- 13 款最棒的 jQuery 图像 360° 旋转插件
在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用 ...
- Glide.js:响应式 & 触摸友好的 jQuery 滑块插件
Glide.js 是一款响应式和对触摸友好的 jQuery 滑块.基于 CSS3 转换实现,并在低版本浏览器降级处理.Glide.js 简单,重量轻,快速,适用于智能手机,平板电脑和台式机.它支持 s ...
- Salvattore:CSS 驱动的 jQuery Masonry 插件
Salvattore 是一个 jQuery 砌体的替代,使用 CSS 驱动的配置.Salvattore 根据您指定的列数组织你的 HTML 元素.容器中的每一个项目会一个接一个被放置在列内,只需要简单 ...
随机推荐
- bzoj2067: [Poi2004]SZN
Description String-Toys joint-stock 公司需要你帮他们解决一个问题. 他们想制造一个没有环的连通图模型. 每个图都是由一些顶点和特定数量的边构成. 每个顶点都可以连向 ...
- maven3.0
Maven入门教程 1.1. 介绍.环境配置 1.1.1. Maven介绍 Maven是一个采用纯Java编写的开源项目管理工具, Maven采用了一种被称之为Project Object Model ...
- iOS App转让流程
说法一: (1)选择转让APP (2)进入转让界面 点击Continue进入下一步 (3)输入对方的APP ID和Team ID Apple ID 和 Team ID 可以在m ...
- java中字符输入输出流在输出结果的结尾多一个乱码字符:'?'
原因以及解决方法: 核心方法如下: public static void main(String[] args) throws Exception{ // TODO Auto-generated me ...
- JS基于时间戳写的浏览访问人数
Title:JS基于时间戳写的浏览访问人数 --2013-12-23 14:07 <script language="JavaScript"> var timesta ...
- java指纹识别+谷歌图片识别技术
http://www.icodeguru.com/3/2451.html http://valseonline.org/thread-124-1-1.html
- cf C. Divisible by Seven
http://codeforces.com/contest/376/problem/C 题意:给你一个大数最多含有10^6个数字,这里面必须含有1,6,8,9,然后重新排列找出一个能被6整除的数. 思 ...
- ViewPage和ActionBar打造滑动视图
滑动效果非常流畅,可以将页签放置到ActionBar上,点击页签可以切换ViewPage,滑动ViewPage会同步更显Tabs. main.xml <?xml version="1. ...
- h.264参考图像列表、解码图像缓存
1.参考图像列表(reference picture list) 一般来说,h.264会把需要编码的图像分为三种类型:I.P.B,其中的B.P类型的图像由于采用了帧间编码的这种编码方式,而帧间编码又是 ...
- C++编程中对缓冲区的理解(OS默认4096大小的缓冲区,有例子,很形象)
什么是缓冲区缓冲区又称为缓存,它是内存空间的一部分.也就是说,在内存空间中预留了一定的存储空间,这些存储空间用来缓冲输入或输出的数据,这部分预留的空间就叫做缓冲区.缓冲区根据其对应的是输入设备还是输出 ...