在学习过程中搜到了一个很有意思的jquery旋转特效插件。
下面先附上插件地址：jquery某大神写的旋转特效插件
下面就直接来记录一下我对這个插件的结果。
首先是导入，不用说，先要把主jquery导进来，然后再把旋转特效插件导进来。 
这个插件使用非常简单，主要涉及一个函数： .rotate()。
以上就是插件的主要属性和方法，还有一些不常用的我没有写上。
注意事项：
- 這个插件只能应用于块级元素，内联块级元素（display:inline-black）和图像，也就是说对内联元素无效。
- ratate（）可以接受正负值，正值表示顺时针旋转，负值表示逆时针旋转。
下面是一些代码。
HTML
<body>
<div id="rotate" class="rotate">
<img id="rotate1" class="rotate" src="image/1.jpg" >
<img id="rotate2" class="rotate" src="image/2.jpg" >
<img id="rotate3" class="rotate" src="image/3.jpg" >
<img id="rotate4" class="rotate01" src="image/4.jpg" alt="">
<img id="rotate5" class="rotate02" src="image/5.jpg" alt="">
</div>
<span>這是一个内联元素</span>CSS
<style> #rotate{ float: left; } #rotate img{ width: 20%; } span{ display: inline-block; } </style>jquery
<script> jQuery(document).ready(function(){ //1.第一个方法： .rotate(angle) jQuery("#rotate1").rotate(-45);//angle可以是数字。 var a=45; jQuery("#rotate2").rotate(a);//angle也可以是变量。 var b=new Array(); b[0]=45; jQuery("#rotate3").rotate(b[0]); //angle还可以是数组变量。 //2.第二个方法： .rotate([object]). //这个接受一个对象，其中对象中可以包含的属性如下。 jQuery(".rotate02").rotate({ angle: 0, //很显然，第一个可以接受的属性是angle : [Number] //像上面一样，可以接受数字和变量值。 //并且這个属性值立即执行的。 animateTo :a, //这个属性设置的是从原始角度过度到设置 //的角度，一般是从angle设置的角度开始。 //注意，和angle不同，這是过渡性的动画。 duration : 10000, //设置animateTo过渡旋转所经历的时间。 callback : function(){ //动画结束后执行的函数。 }, bind:{ click : function(){ // $(this).hide(); $(this).stopRotate(); } } }) jQuery("span").rotate(-a);//只能旋转块级元素。 }) </script>效果图!
