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（控制图片转动）的更多相关文章

  1. jQuery旋转插件jquery.rotate.js 让图片旋转

    演示1 直接旋转一个角度 $('#img1').rotate(45); 演示2 鼠标移动效果 $('#img2').rotate({ bind : { mouseover : function(){ ...

  2. jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码

    需求: 抽奖代码最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: ? 1 2 3 4 5 6 7 8 9 10 ...

  3. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  4. jquery.rotate.js可选抽奖次数和中奖内容的转盘抽奖demo

    需求: 最多可以抽奖5次,而且,每次只会中“2000元理财金”或者“谢谢参与”,其它的不会抽中(哈哈,果然都是套路). 效果如下: 一.页面结构: <div class="g-cont ...

  5. jQuery.rotate.js笔记

    1. jQuery.rotate.js是什么 一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画. 这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转 ...

  6. js 控制图片大小核心讲解

    控制图片大小的方法有很多,在本文将为大家详细介绍下使用js实现缩放图片,核心代码如下,感兴趣的朋友可以参考下 缩放图片脚本分享 <!DOCTYPE HTML PUBLIC "-//W3 ...

  7. jquery.rotate.js实现旋转动画

    1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,c ...

  8. [css或js控制图片自适应]

    [css或js控制图片自适应]图片自动适应大小是一个非常常用的功能,在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制,我们可不可以用CSS控制图片使它自适应大小呢?此个人博客想到了一个 ...

  9. jQuery.rotate.js参数

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

随机推荐

  1. Qt License 解读

    对于桌面和移动平台应用 官方说明如下 Qt for Application Development lets you create applications for desktop and mobil ...

  2. （七）Create an Index

    Now let’s create an index named "customer" and then list all the indexes again: 现在让我们创建一个名 ...

  3. Redis原理

    RESP协议 支持tcp协议.基本数据类型,比如数组,字符串等,也可支持其他的通信场景. 模拟redis接收传输过来的set数据 //ServerSocket监听6379端口模拟redis publi ...

  4. leetcode 224. Basic Calculator 、227. Basic Calculator II

    这种题都要设置一个符号位的变量 224. Basic Calculator 设置数值和符号两个变量,遇到左括号将数值和符号加进栈中 class Solution { public: int calcu ...

  5. Luogu P1852 BZOJ 2144 [国家集训队]跳跳棋

    qwq 这题一看就不会,如果不是gg让做我是坚决不会做的 画图模拟,因为一次只能跳过一个棋子,所以对于一种情况只有三种移动方式: 中间向左跳 中间向右跳 左或右(距中间近的那个)向中间跳 发现,除了跳 ...

  6. Golang 入门系列（一）Go环境搭建

    安装 Go Go语言的优劣,这里就不介绍了,下面直接讲Go 的安装: Go 的官方网站:http://golang.org/(需要FQ软件) 国内下载地址:http://www.golangtc.co ...

  7. The 16th Zhejiang provincial collegiate programming contest

    今天我挺有状态的,看过的题基本都给了正解(可能是昨晚cf div3打得跟屎一样,人品守恒,不好意思发题解了),自己也给队伍签了很多水题(不敢让队友写,怕出锅). 最后6题滚了,有点可惜.还差B和K没做 ...

  8. Jquery mobile动态生成ListView调用刷新方法报错

    错误:cannot call methods on listview prior to initialization... 示例: <div data-role="page" ...

  9. 基于Flask 实现Web微信登陆

    网页版微信登陆网址 https://login.wx.qq.com/ 获取微信登陆的二维码 在浏览器中访问登陆接口 https://login.wx.qq.com/ 我们查找二维码的图片可以看到 其中 ...

  10. Uint 7.文本和字体属性,background,精灵图和3种定位

    一. 文本属性 CSS 文本属性可定义文本的外观. 通过文本属性,您可以改变文本的颜色.字符间距,对齐文本,装饰文本,对文本进行缩进,等等. <!DOCTYPE html> <htm ...