jQuery.rotate.js（控制图片转动）
jQuery.rotate.js笔记
1. jQuery.rotate.js是什么
一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画。
这个库开发的目的是为了旋转img的，在3.x之后的版本可能支持其它元素，但旋转其它元素在一些低版本浏览器可能出现兼容器问题。所以应该尽量只用在旋转img元素上。
2. jQuery.rotate.js怎么用
2.1 接口
总共提供了四个方法：
rorate(angle); rorate(parameters); getRorateAngle(); stopRotate();
2.1.1 rorate(angle);
传入一个角度，会直接将元素旋转到对应的角度，并不会有动画：
$("#foo").rotate(15);
效果：
2.1.2 rorate(parameters);
支持的参数：
| 参数名 | 类型 | 说明 |
| angle | Number | 旋转到指定的角度，不带动画，默认是0 |
| animateTo | Number | 旋转到指定的角度，使用动画 |
| bind | Object | 可以传入一个对象，作为事件绑定到元素上。 |
| center | Array | 用来设定旋转的中心，传入的数组是[X,Y]格式的，可以使用数值[100,100]或者百分比[“50%”,“50%”]，默认是以元素的中心点旋转 |
| duration | Number | 指定动画的持续时间，默认是1000毫秒 |
| step | Function | 传入一个回调函数在动画的每一步都会调用一下 |
| easing | Function | 让动画看起来更自然，感觉用不到，而且本人对图形学没啥研究，感兴趣的官网有详细描述，就不再深究了…. |
| callback | Function | 当动画完成时的回调函数。 |
关于bind的想法：
jQuery已经为我们提供了很健全的事件绑定接口了，为啥这里还提供bind呢？
猜想可能是为了将同义操作统一化。
Demo ： 一个简单的例子（倾斜的图画在鼠标移上去的时候摆正，离开的时候又恢复原样）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
#foo{
width:300px;
height:200px;
margin-top:100px;
}
</style>
</head>
<body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("#foo").rotate({
angle:15,
bind:{
mouseover:function(){
$(this).rotate({
animateTo:0
});
},
mouseout:function(){
$(this).rotate({
animateTo:15
});
}
}
});
}); </script>
</body>
</html>
效果：
Demo：center的使用
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
#foo{
width:200px;
height:130px;
margin-top:100px;
}
</style>
</head>
<body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript"> $(document).ready(function(){ $("#foo").rotate({
bind:{
click:function(){
$(this).rotate({
center:["0","100%"],
animateTo:90
});
}
}
}); }); </script>
</body>
</html>
效果：
2.1.3 getRorateAngle();
获取元素当前旋转的角度
$(document).ready(function(){
$("#foo").rotate({
angle:15,
bind:{
click:function(){
console.log($(this).getRotateAngle());
}
}
});
});
2.1.4 stopRotate();
停止元素的旋转。
一个小例子，元素不断的匀速旋转，单击时停止旋转：
$(document).ready(function(){
var rotate=function(){
$("#foo").rotate({
angle:0,
animateTo:360,
duration:5000,
callback:rotate,
easing: function (x,t,b,c,d){
return c*(t/d)+b;
},
bind:{
click:function(){
$(this).stopRotate();
}
}
});
}
rotate();
});
效果：
另一种实现元素不断旋转的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
text-align:center;
}
#foo{
width:300px;
height:200px;
margin-top:100px;
}
</style>
</head>
<body> <img id="foo" src="img/foo.jpg" alt="" /> <script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jQueryRotate.js"></script>
<script type="text/javascript"> $(document).ready(function(){ var angle=0;
var rotate=function(){
angle=angle+10;
$("#foo").rotate({
animateTo:angle,
duration:100
})
}
setInterval(rotate,100); }); </script>
</body>
</html>
效果并不是特别理想，感觉有些卡顿。
3. 总结
1. jQuery.rotate适合对img元素进行旋转操作。
2. 可以设置动画过渡，可以设置过渡的时间。
3. 可以设置完成回调函数。
4. 可以自定义旋转中心。
5. 可以设置动画曲线。
6. 编不出了…
参考资料：
1. 官网 http://jqueryrotate.com/
jQuery.rotate.js（控制图片转动）的更多相关文章
- jQuery旋转插件jquery.rotate.js 让图片旋转
演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...
- jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo
需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...
- jQuery.rotate.js笔记
1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...
- js 控制图片大小核心讲解
控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...
- jquery.rotate.js实现旋转动画
1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...
- [css或js控制图片自适应]
[css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...
- jQuery.rotate.js参数
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
随机推荐
- 使用opencv进行简单的手势检测[by Python]
代码参考于:https://github.com/rainyear/lolita/issues/8 简单的手势识别,基本思路是基于皮肤检测,皮肤的颜色在HSV颜色空间下与周围环境的区分度更高,从RGB ...
- Linux-基础学习（五）-mariadb主从复制以及redis学习
开始今日份整理 1.mariadb的主从复制 主从复制大致图示: 1.1 mysql基本命令复习 linux下的操作 .启动mysql systemctl start mariadb .linux客户 ...
- JavaScript简单了解
一.JavaScript 的诞生历史 在最初的时候 JS 主要解决的问题是一些服务器端语言(perl)对数据的 验证功能,在js 出现之前要对表单的数据进行验证需要将数据提交到服务器 端之后才能验证数 ...
- 使用Mycat构建MySQL读写分离、主从复制、主从高可用
数据库读写分离对于大型系统或者访问量很高的互联网应用来说,是必不可少的一个重要功能. 从数据库的角度来说,对于大多数应用来说,从集中到分布,最基本的一个需求不是数据存储的瓶颈,而是在于计算的瓶颈,即S ...
- Linux内存管理 (15)页面迁移
专题:Linux内存管理专题 关键词:RMAP.页面迁移. 相关章节:反向映射RMAP.内存规整. 页面迁移的初衷是为NUMA系统提供一种将进程迁移到任意内存节点的能力,后来内存规整和内存热插拔场景都 ...
- linux查询日志常用命令，经常更新
1.grep命令 grep -c "查询内容" filename ------c,是小写,可以知道你要查询的内容在这个文件中是否存在 grep -C 10 "查询内 ...
- .NET Core 实现 Redis 批量查询指定格式的Key
一. 问题场景 Redis 作为当前最流行的内存型 NoSQL 数据库,被许多公司所使用,作为分布式缓存.我们在实际使用中一般都会为 key 带上指定的前缀或者其他定义的格式.当由于我们程序出现bug ...
- 基于Metronic的Bootstrap开发框架--工作流模块功能介绍（2）
本篇继续<基于Metronic的Bootstrap开发框架--工作流模块功能介绍>,继续介绍基于Metronic的Bootstrap开发框架的工作模块功能,介绍工作流模块中相关业务表单的界 ...
- Scrapy命令行详解
官方文档:https://doc.scrapy.org/en/latest/ Global commands: startproject genspider settings runspider sh ...
- openstack搭建之-基础服务配置（7）
基础环境准备,所需服务器及说明 172.16.2.51 base.test.com 基础服务节点 172.16.2.52 ctrl.test.com 控制节点 172.16.2.53 ...