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

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

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

参数

参数 类型 说明 默认值
angle 数字 旋转一个角度 0
animateTo 数字 从当前的角度旋转到多少度 0
step 函数 每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数 无
easing 函数 自定义旋转速度、旋转效果，需要使用 jQuery.easing.js 无
callback 函数 旋转完成后的回调函数 无
getRotateAngle 函数 返回旋转对象当前的角度 无
stopRotate 函数 停止旋转 无

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

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery旋转插件jqueryrotate</title>

<style>

/*

 *  ease-in-out 规定以慢速开始和结束的过渡效果

 */

img{

-moz-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-ms-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

img:hover{

-moz-transform: rotate(70deg);

-webkit-transform: rotate(70deg);

-o-transform: rotate(70deg);

-ms-transform: rotate(70deg);

transform: rotate(70deg);

}

body{background: url(images/bg.jpg) repeat center center;}

.test {

    width: 500px;

    height: 300px;

    margin: 30px auto;

    position: relative;

} .test img {

    position: absolute;

    top: 40%;

    left: 0%;

    margin-left: -70px;

    margin-top: -100px;

} .test img:nth-child(1){

    z-index: １;

    opacity: .6;

} .test img:nth-child(2){

    z-index: 2;

    transform: rotate(45deg);

}

</style>

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

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

<script type="text/javascript">

$(document).ready(function(){

//旋转45度

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

//鼠标滑过旋转180，离开回0度

$("#img2").rotate({

   bind:

     {

        mouseover : function() {

            $(this).rotate({animateTo:180});

        },

        mouseout : function() {

            $(this).rotate({animateTo:0});

        }

     }

});

//慢速旋转

var angle = 0;

setInterval(function(){

      angle+=3;

     $("#img3").rotate(angle);

},50);

//快速旋转一周，callback回调有时间间隔

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){        // t: current time, b: begInnIng value, c: change In value, d: duration

          return c*(t/d)+b;

      }

   });

}

rotation2();

//点击后旋转180度

$("#img6").rotate({

   bind:

     {

        click: function(){

            $(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })

        }

     }

});

//每次点击在原基础上旋转90度

var value2 = 0

$("#img7").rotate({

   bind:

     {

        click: function(){

            value2 +=90;

            $(this).rotate({ animateTo:value2})

        }

     }

});

//跷跷板动画

var nnn = 0;

setInterval(function(){

    nnn++;

    if(nnn>=20){

        $("#img8").rotate(45);

    }

    if(nnn>=50){

        $("#img8").rotate(0);

        nnn=0;

    }

},50);

});

</script>

</head>

<body>

<img id="img1" src="data:images/chrome.png" width="256" height="256"/>

<img id="img2" src="data:images/chrome.png" width="256" height="256" />

<img id="img3" src="data:images/chrome.png" width="256" height="256"/>

<img id="img4" src="data:images/chrome.png" width="256" height="256"/>

<br>

<img id="img5" src="data:images/chrome.png" width="256" height="256"/>

<img id="img6" src="data:images/chrome.png" width="256" height="256"/>

<img id="img7" src="data:images/chrome.png" width="256" height="256"/>

<img id="img8" src="data:images/chrome.png" width="256" height="256"/>

<br>鼠标滑过后旋转，离开后恢复原位：

<div class="test">

<img src="data:images/cardKingClub.png" alt="" width="70" height="100" />

<a herf="#"><img src="data:images/cardKingClub.png" alt="" width="70" height="100" /></a>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

    html5网页动画总结--jQuery旋转插件jqueryrotate

</div>

</body>

</html>

html5网页动画总结--jQuery旋转插件jqueryrotate的更多相关文章

  1. jQuery旋转插件jqueryrotate 图片旋转

    "jquery.rotate.min.js"是jQuery旋转rotate插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .O ...

  2. jQuery旋转插件—rotate-摘自网友

    jQuery旋转插件—rotate 时间:2013年01月03日作者:愚人码头查看次数:5,660 views评论次数:6条评论 网上发现一个很有意思的jQuery旋转插件,支持Internet Ex ...

  3. jQuery旋转插件

    jQuery旋转插件,支持Internet Explorer 6.0 + .Firefox 2.0.Safari 3.Opera 9.Google Chrome,高级浏览器下使用Transform,低 ...

  4. jQuery抽奖插件 jQueryRotate

    实现代码 网页中引用 <script type="text/javascript" src="js/jquery.min.js"></scri ...

  5. jQuery旋转插件—rotate

    jQuery旋转插件,支持Internet Explorer 6.0+ .Firefox 2.0 .Safari 3 .Opera 9 .Google Chrome rotate(angle) 正值表 ...

  6. 基于HTML5 audio元素播放声音jQuery小插件

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...

  7. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

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

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

  9. jquery旋转插件rotate参数说明

    具体可见:http://www.jianshu.com/p/b632a1ed6a57

随机推荐

  1. SQL Server优化技巧之SQL Server中的"MapReduce"

    日常的OLTP环境中,有时会涉及到一些统计方面的SQL语句,这些语句可能消耗巨大,进而影响整体运行环境,这里我为大家介绍如何利用SQL Server中的”类MapReduce”方式,在特定的统计情形中 ...

  2. 使用本地服务器组来管理局域网或公网上的SQLSERVER

    使用本地服务器组来管理局域网或公网上的SQLSERVER 测试的两台机器 Windows7 64位   SQLSERVER2005 SP5 Windows7 64位   SQLSERVER2012 S ...

  3. 移植到Windows CE 的经验

    Windows CE 是微软早期推出的嵌入式设备和移动设备的开发运行平台,虽然目前移动端几乎都是android和ios的天下,但是,在嵌入式设备领域,Windows CE仍然占有一块地盘.很多用户希望 ...

  4. [MSSQL2005]再看CTE

    个人认为CTE最大的做点是可以处理树状存储的数据了 例如类似这样设计的数据表,ID,ParentID这样的设计使用CTE就非常方便,原因就是CTE可以自引用,达到类似递归的效果 那么问题来了,如何使用 ...

  5. mongodb(一) NoSQL简介

    NoSQL简介   写在前面,本文就是学习的记录笔记,大部分内容都属于参考,分享给大家 关系与非关系数据库      那么应该了解下影响关系数据库性能的主要原因: 在关系型数据库中,导致性能欠佳的最主 ...

  6. [ACM_模拟][ACM_暴力] Lazier Salesgirl [暴力 懒销售睡觉]

    Description Kochiya Sanae is a lazy girl who makes and sells bread. She is an expert at bread making ...

  7. 我们可以用SharePoint做什么

    前言 不知不觉作为一个SharePoint的开发人员若干年了,从SharePoint api 开始学习,到了解SharePoint的结构,逐渐一点点了解sharepoint的体系:从SharePoin ...

  8. C++ 表达式

    <C++ Primer 4th>读书摘要 C++ 提供了丰富的操作符,并定义操作数为内置类型时,这些操作符的含义.除此之外,C++ 还支持操作符重载,允许程序员自定义用于类类型时操作符的含 ...

  9. 解决Eclipse Debug source not found问题

    解决方法如下:Debug 视图下-->在调试的线程上 右键单击-->选择Edit Source Lookup Path-->选择Add-->选择Java Project选择相应 ...

  10. 布局神器display:table-cell

    元素两端对齐 第一个案例是让两个元素分别向左和向右对齐,如果是过去,我一定会用float来实现,但其实用table可以这么做: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...