jquery.rotate.js的应用范例

最新推荐文章于 2018-06-13 17:30:43 发布

vcxiaohan2

最新推荐文章于 2018-06-13 17:30:43 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery插件

本文链接：https://blog.csdn.net/u011500781/article/details/50073437

版权

jQuery插件专栏收录该内容

29 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ rotate示例

使用此插件可以轻松实现“转盘抽奖”的效果，大家可以在网上观看demo，在这里我就不贴代码了

使用注意;
1 支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome

2在高级浏览器下默认使用transform: rotate(0deg);transform-origin: 50% 50% 0px;，低版本ie默认使用VML(ie特有的一种矢量可标记语言，类似svg)实现

3只可使用在img标签上，如果你用的div标签，在ie8-会失去效果，因为VML是只针对图片的

4 easing: function(x, t, b, c, d) {
return (t/d)*c;//线性旋转
}

5如果你想使用其他的缓动效果，可以引入jquery.easing.js插件配合使用

以下演示几种较常用的效果：

<!doctype html>  
<html>  
 <head>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  <title>demo</title>  
    
  <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>  
  <script type="text/javascript" src="js/jquery.rotate.min.js"></script>  
  
 </head>  
 <body>  
  
  <img class="img1" src="../images/a1.png" alt="" width="100" height="100" />  
  <img class="img2" src="../images/a2.png" alt="" width="100" height="100" />  
  <img class="img3" src="../images/a3.png" alt="" width="100" height="100" />  
  <img class="img4" src="../images/a4.png" alt="" width="100" height="100" />  
  <img class="img5" src="../images/456.png" alt="" width="100" height="100" />  
    
<script>  
  
    //示例1--静态角度  
    $(".img1").rotate({  
      angle: 45  
    });  
  
    //示例2--绑定点击事件  
    $(".img2").rotate({  
      bind: {  
        click: function() {  
          $(this).rotate({  
            angle: 0,  
            animateTo: 180,  
            easing:  ""  
          });  
        }  
      }  
    });  
  
    //示例3--定时器  
    (function() {  
      var angle = 0;  
      var timer = setInterval(function() {  
        angle += 20;  
        $(".img3").rotate(angle);  
      }, 50)  
    })();  
  
    //示例4--回调函数  
    function rotation() {  
      $(".img4").rotate({  
        //duration: 5000,  
        angle: 0,  
        animateTo: 360,  
        easing: function(x, t, b, c, d) {  
          return (t/d)*c;//线性旋转  
        },  
        callback: rotation  
      });  
    }  
    rotation();  
  
    //示例5--点击自增  
    (function() {  
      var angle = 0;  
      $(".img5").rotate({  
        bind: {  
          click: function() {  
            angle += 90;  
            $(this).rotate({  
              animateTo: angle  
            });  
          }  
        }  
      });  
    })();  
  
  
  </script>  
 </body>  
</html>

vcxiaohan2

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.rotate.js的应用范例

使用此插件可以轻松实现“转盘抽奖”的效果，大家可以在网上观看demo，在这里我就不贴代码了使用注意;1 支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome2在高级浏览器下默认使用transform: rotate(0deg);transform-origin: 50% 50%
复制链接

扫一扫

专栏目录