专栏首页向治洪html5 jqueryrotate插件实现旋转动画

html5 jqueryrotate插件实现旋转动画

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

今天介绍一款 jQuery 插件——jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。如果你想在低版本的 IE 中实现旋转效果,那么 jqueryrotate 是一个很好的选择。

兼容性

jqueryrotate 支持所有主流浏览器,包括 IE6。jqueryrotate 在高级浏览器中使用 CSS3 transform 属性实现,在低版本 IE 中使用 VML 实现。当然,你可以使用 IE 条件注释,低版本 IE 使用 jqueryrotate,高级浏览器则直接使用 CSS3。

使用方法

我们使用 Google Chrome 的 Logo 做演示,图片如下,请注意对比,不要看花眼了。

演示1 直接旋转一个角度

 $('#img1').rotate(45);  

 $('#img1').rotate({angle:45});  

演示2 鼠标移动效果

 $('#img2').rotate({   
     bind : {  
         mouseover : function(){  
             $(this).rotate({animateTo: 180});  
         }, mouseout : function(){  
             $(this).rotate({animateTo: 0});  
         }  
     }  
 });  

演示3 不停旋转

 var angle = 0;  
 setInterval(function(){  
     angle +=3;  
     $('#img3').rotate(angle);  
 }, 50);  
 var rotation = function (){  
     $('#img4').rotate({  
         angle: 0,   
         animateTo: 360,   
         callback: rotation  
     });  
 }  
 rotation();  
 var rotation2 = function(){  
     $('#img5').rotate({  
         angle: 0,   
         animateTo: 360,   
         callback: rotation2,  
         easing: function(x,t,b,c,d){  
  return c*(t/d)+b;  
         }  
     });  
 }  
 rotation2();  

演示4 点击旋转

 $('#img6').rotate({   
     bind: {  
         click: function(){  
             $(this).rotate({  
                 angle: 0,  
                 animateTo: 180,  
                 easing: $.easing.easeInOutExpo  
             });  
         }  
     }  
 });  
 var value2 = 0;  
 $('#img7').rotate({   
     bind: {  
         click: function(){  
             value2 +=90;  
             $(this).rotate({  
                 animateTo: value2  
             });  
         }  
     }  
 });  

参数

参数

类型

说明

默认值

angle

数字

旋转一个角度

0

animateTo

数字

从当前的角度旋转到多少度

0

step

函数

每个动画步骤中执行的回调函数,当前角度值作为该函数的第一个参数

easing

函数

自定义旋转速度、旋转效果,需要使用 jQuery.easing.js

callback

函数

旋转完成后的回调函数

getRotateAngle

函数

返回旋转对象当前的角度

stopRotate

函数

停止旋转

演示虽然使用的是图片,但 jqueryrotate 并不只是能运用在图片上,其他元素如 div 等也可以使用。同时,你可以发挥想象,制作出更多关于旋转的特效。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端开发我为什么选择cordova

    cordova与phonegap有什么关系? phoengap 官方网址:http://phonegap.com 如果能了解一个框架的兴起还是一件比较有趣...

    xiangzhihong
  • Rxjava + retrofit + dagger2 + mvp搭建Android框架

    最近出去面试,总会被问到我们项目现在采用的什么开发框架,不过据我的经验网络框架(volley)+图片缓存(uIl)+数据库(orm)+mvp,不过现在这套框架比...

    xiangzhihong
  • Android入门之数据传递

    Intent数据传递 List 传递List传递List的方法 ArrayList<String> info = new ArrayList<String>()...

    xiangzhihong
  • 自动化构建工具Maven

    如今我们构建一个项目需要用到很多第三方的类库,一个项目jar包的数量之多往往让我们无法想象,并且jar包之间的关系错综复杂,一个jar包往往又会引用其他jar包...

    wangweijun
  • R语言 控制流:for、while、ifelse和自定义函数function

    行列引用、条件筛选等可以简单的数据管理,但其在无法有效处理多次、多重、有规律的循环和判断问题,而控制流却可以通过循环、判断、跳错等等操作轻松处理此类问题。

    1480
  • @Controller和@RestController的区别

    我们一般都会在Controller上加上@Controller注解,但是有时候也见有加上@RestController的,现在就说说他们的区别:

    ydymz
  • 搞事情,一线大厂的HR常用来“套路”程序员的面试题,被曝光了

    Java架构技术
  • Android 开发艺术探索笔记二

    不管是Activity,Dialog还是Toast,它们视图都是附加在window上的,window才是view的直接管理者。

    Yif
  • GEF学习笔记3

    前面的步骤,创建了公司视图,下面再创建一个国家视图用来容纳公司视图。这就需要按前面的方法把MVC都重新创建一遍。

    py3study
  • 巧用 display: contents 增强页面语义

    display: contents 是一个比较陌生的属性,虽然属于 display 这个基本上是最常见的 CSS 属性,但是 contents 这个取值基本不会...

    Sb_Coco

扫码关注云+社区

领取腾讯云代金券