欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

jquery.rotate.js实现旋转动画 有大用 有大大用

1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,ctrl+s就好了) 

1
<script type="text/javascript" src="js/jquery.rotate.js"></script>

  文件路径根据自己实际情况来写。

2.或页面加载直接执行,或通过绑定事件触发,让目标元素转起来

1
2
3
4
5
6
7
8
9
$('#container').rotate({ 
    bind : {
        mouseover : function(){
             $(this).find(".icon").rotate({animateTo: 180,duration:500});
        }, mouseout : function(){
             $(this).find(".icon").rotate({animateTo: 0,duration:500});
        }
    }
});

  我这里实现的效果是:鼠标移到'#container'上边时,'icon'顺时针旋转180度(用时0.5秒),鼠标移出时逆时针旋转180度(用时0.5秒)。

更多的用法请参考:  https://www.cnblogs.com/cc11001100/p/6354234.html

来自  http://www.cnblogs.com/zhoujl-5071/p/9648090.html



使用 $
('#left_erji_big_img_4').rotate(41);

旋转后的 css 如下 

image.png


1. jQuery.rotate.js是什么

一个开源的兼容多浏览器的jQuery插件用来对元素进行任意角度的旋转动画。

image

这个库开发的目的是为了旋转img的,在3.x之后的版本可能支持其它元素,但旋转其它元素在一些低版本浏览器可能出现兼容器问题。所以应该尽量只用在旋转img元素上。

 

2. jQuery.rotate.js怎么用

2.1 接口

总共提供了四个方法:

复制代码
rorate(angle);

rorate(parameters);

getRorateAngle();

stopRotate();
复制代码

2.1.1 rorate(angle);

传入一个角度,会直接将元素旋转到对应的角度,并不会有动画:

$("#foo").rotate(15);

效果:

image

2.1.2 rorate(parameters);

支持的参数:

参数名类型说明
angleNumber旋转到指定的角度,不带动画,默认是0
animateToNumber旋转到指定的角度,使用动画
bindObject可以传入一个对象,作为事件绑定到元素上。
centerArray用来设定旋转的中心,传入的数组是[X,Y]格式的,可以使用数值[100,100]或者百分比[“50%”,“50%”],默认是以元素的中心点旋转
durationNumber指定动画的持续时间,默认是1000毫秒
stepFunction传入一个回调函数在动画的每一步都会调用一下
easingFunction让动画看起来更自然,感觉用不到,而且本人对图形学没啥研究,感兴趣的官网有详细描述,就不再深究了….
callbackFunction当动画完成时的回调函数。

 

 转动眼睛关于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/

知识共享许可协议
本作品采用知识共享署名 4.0 国际许可协议进行许可。


来自  https://www.cnblogs.com/cc11001100/p/6354234.html



图片旋转jquery.rotate


转载自:http://www.css88.com/archives/4519

下载地址:http://plugins.jquery.com/rotate/


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

调用和方法:

rotate(angle)

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

例如:

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

rotate(parameters)

parameters参数:[Object] 包含旋转参数的对象。支持的属性:

  1. angle属性:[Number] – default 0 – 旋转的角度数,并且立即执行例如:

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

  3.  

  4.  

  5. image.png

  6.  

    1. $("#img").rotate({
    2. bind: {
    3. click: function () {
    4. $(this).rotate({
    5. angle: 0,
    6. animateTo: 180
    7. })
    8. }
    9. }
    10. });
  7. animateTo属性:[Number] – default 0 – 从当前角度值动画旋转到给定的角度值 (或给定的角度参数)例如: 结合上面的例子,请参阅使用。

  8. duration属性:[Number] – 指定使用animateTo的动画执行持续时间例如 (click on arrow):

  9. image.png


    1. $("#img").rotate({
    2. bind: {
    3. click: function () {
    4. $(this).rotate({
    5. duration: 6000,
    6. angle: 0,
    7. animateTo: 100
    8. })
    9. }
    10. }
    11. });
  10. step属性:[Function] – 每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数

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

    1
    function (x, t, b, c, d) { return -* ((t=t/d-1)*t*t*- 1) + b; }

    Where:t: current time,

    b: begInnIng value,

    c: change In value,

    d: duration,

    x: unused

    No easing (linear easing):

    1
    function(x, t, b, c, d) { return (t/d)*; }

    Example (click on arrow):

  12. image.png


    1. $("#img").rotate({bind: {
    2. click: function () {
    3. $(this).rotate({
    4. angle: 0,
    5. animateTo: 180,
    6. easing: $.easing.easeInOutElastic
    7. })
    8. }
    9. }
    10. });
  13. callback属性:[Function] 动画完成时执行的回调函数例如 (click on arrow):

  14. image.png


    1. $("#img").rotate({bind: {
    2.  

    3. click: function () {
    4. $(this).rotate({
    5. angle: 0,
    6. animateTo: 180,
    7. callback: function () {
    8. alert(1)
    9. }
    10. })
    11. }
    12. }
    13. });

getRotateAngle

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

例如:

image.png
1
2
3
4
5
6
7
8
  1. $("#img").rotate({
  2. angle: 45,
  3. bind: {
  4. click: function () {
  5. alert($(this).getRotateAngle());
  6. }
  7. }
  8. });

stopRotate

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

例如:


image.png

2
3
4
5
6
7
8
9
10
11
12
13
14
15
  1. $("#img").rotate({
  2. bind: {
  3. click: function () {
  4. $("#img").rotate({
  5. angle: 0,
  6. animateTo: 180,
  7. duration: 6000
  8. });
  9. setTimeout(function () {
  10. $("#img").stopRotate();
  11. }, 1000);
  12. }
  13. }
  14. });

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


来自  https://blog.csdn.net/upxiaofeng/article/details/52168956

普通分类: