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 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

css 中 zoom和transform:scale的区别(转载)

还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了:

873
来自专栏ionic3+

【技巧】ionic3如何实现优雅的弹窗动画

关于这篇文章,很早前就准备写了,只是内容属于我了解的非官方资料,怕有Bug风险误导别人,又怕我表述不清楚一直没动笔,后来群里有人专门找我问这个,那我还是写一下,...

2333
来自专栏Micro_awake web

重温CSS3

基础不牢,地动山摇!没办法,只能重温“经典”! 1.CSS3边框:border-radius;  box-shadow;  border-image borde...

3488
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

632
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

1878
来自专栏小狼的世界

em是否到了退出的时候

今天看到 YUI CSS 框架中的时,看到用了其用来表示宽度的时候,很多地方都用了 em,在调整字体大小的时候,用了百分比。官方的说法是这样的:

692
来自专栏Nian糕的私人厨房

CSS Flex弹性盒布局

我在上一篇博文CSS 布局_2 Flex弹性盒里,对 Flex 弹性盒有着详细的介绍,这里就不再复述了,书写页面前,我们先来介绍一个之前没提到的知识点——伪类选...

1255
来自专栏IMWeb前端团队

CSS3 object-fit和object-position

本文作者:IMWeb 郭明慧 原文出处:IMWeb社区 未经同意,禁止转载 最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间...

2145
来自专栏coding for love

CSS常用布局实现01-水平居中

居中是我们平常遇到的很常见的一种布局方式,主要分为水平居中,垂直居中,水平垂直居中。每种情况又分为,已知宽度,不知宽度,对块级元素居中,对行内替换元素水平居中,...

981
来自专栏企鹅号快讯

Web前端:浅析“HTML+CSS的基本应用”

Hyper Text Markup Language,简称HTML,超文本标记语言,因页面中可以包含图片、链接、音乐、程序等非文本元素,所以称为超文本。 ? H...

22310

扫码关注云+社区