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 ...

随机推荐

nginx 反向代理负载均衡
nginx反向代理用户(浏览器) 请求网站资源 -> 直接定位到django后台(所有的请求压力,都直接给了后台) django默认对并发性很差,并且处理网页的静态资源,效率很差 10万个并 ...
MySQL常用日期时间函数
日期和时间函数: MySQL服务器中的三种时区设置: ①系统时区---保存在系统变量system_time_zone ②服务器时区---保存在全局系统变量global.time_zone ③每个客户端 ...
Linux-基础学习（一）-基本命令
开始今日份整理 1.Linux的文件目录操作 1.1 ls 简述:ls是list的缩写,用于列出指定目录或文件常用的选项 1 -a:显示所有档案及目录(ls内定将档案名或目录名称为“.”的视为隐藏, ...
Cordova入门系列（三）Cordova插件调用
版权声明:本文为博主原创文章,转载请注明出处上一章我们介绍了cordova android项目是如何运行的,这一章我们介绍cordova的核心内容,插件的调用.演示一个例子,通过cordova插件, ...
vue style标签中使用less
只需要下载相应的包即可:(前提是使用vue-cli搭建的项目) 1.安装less依赖,npm install less less-loader --save 2.即可在相应的vue文件中使用less操 ...
SystemCheckError: System check identified some issues: ERRORS: users.Test.groups: (fields.E304) Reverse accessor for 'Test.groups' clashes with reverse accessor for 'User.groups'.
Error Msg: SystemCheckError: System check identified some issues: ERRORS: users.Test.groups: (fields ...
【学习总结】GirlsInAI ML-diary 总
2019-1-7 GirlsInAI第一期: 人工智障工程师养成计划,代号ML-diary 原博github链接:Girls-In-AI 环境:Windows / MacOS 工具:Anaconda ...
Linux(Ubuntu)使用日记------tenserflow安装（pip安装法）
其实步骤是很简单的,只是一开始在网上找了一份错误的教程的原因,掉入了坑. 安装过程: 1. 检查pip版本 pip3 -V 要求使用最新版的pip 9.0.1,如果不是,按照下面的方法安装最新的pip ...
Atcoder Beginner Contest 124 解题报告
心态爆炸.本来能全做出来的.但是由于双开了Comet oj一个比赛,写了ABC就去搞那个的B题还被搞死了. 回来写了一会D就过了.可惜比赛已经结束了.真的是作死. A - Buttons #incl ...
关于vue-cli的项目结构【转】
一.总体框架一个vue-cli的项目结构如下,其中src文件夹是需要掌握的,所以本文也重点讲解其中的文件,至于其他相关文件,了解一下即可. vue-cli项目总体结构二.文件结构细分 1.buil ...

jQuery.rotate.js（控制图片转动）