jquery-rotate图片旋转动画

使用说明：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/js/jquery.rotate.min.js"></script>
</head>
<body>
<div class="main">
	<div id="primary" class="primary">
		<div class="article">
												<header>
				<h1>jQuery旋转插件jqueryrotate</h1>
				
			</header>
<h3>演示1 直接旋转一个角度</h3>
<p><img id="img1" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">$('#img1').rotate(45);</pre>
<p>或</p>
<pre class="brush:js">$('#img1').rotate({angle:45});</pre>
<h3>演示2 鼠标移动效果</h3>
<p><img id="img2" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">$('#img2').rotate({ 
    bind : {
        mouseover : function(){
            $(this).rotate({animateTo: 180});
        }, mouseout : function(){
            $(this).rotate({animateTo: 0});
        }
    }
});</pre>
<h3>演示3 不停旋转</h3>
<p><img id="img3" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">var angle = 0;
setInterval(function(){
    angle +=3;
    $('#img3').rotate(angle);
}, 50);</pre>
<p><img id="img4" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">var rotation = function (){
    $('#img4').rotate({
        angle: 0, 
        animateTo: 360, 
        callback: rotation
    });
}
rotation();</pre>
<p><img id="img5" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">var rotation2 = function(){
    $('#img5').rotate({
        angle: 0, 
        animateTo: 360, 
        callback: rotation2,
        easing: function(x,t,b,c,d){
            return c*(t/d)+b;
        }
    });
}
rotation2();</pre>
<h3>演示4 点击旋转</h3>
<p><img id="img6" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">$('#img6').rotate({ 
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                easing: $.easing.easeInOutExpo
            });
        }
    }
});</pre>
<p><img id="img7" alt="Google Chrome" src="http://image.tupian114.com/20140424/14360094.png" /></p>
<pre class="brush:js">var value2 = 0;
$('#img7').rotate({ 
    bind: {
        click: function(){
            value2 +=90;
            $(this).rotate({
                animateTo: value2
            });
        }
    }
});</pre>
<h2>参数</h2>
<table class="table">
<thead>
<tr>
<th>参数</th>
<th>类型</th>
<th>说明</th>
<th>默认值</th>
</tr>
</thead>
<tbody>
<tr>
<td>angle</td>
<td>数字</td>
<td>旋转一个角度</td>
<td>0</td>
</tr>
<tr>
<td>animateTo</td>
<td>数字</td>
<td>从当前的角度旋转到多少度</td>
<td>0</td>
</tr>
<tr>
<td>step</td>
<td>函数</td>
<td>每个动画步骤中执行的回调函数，当前角度值作为该函数的第一个参数</td>
<td>无</td>
</tr>
<tr>
<td>easing</td>
<td>函数</td>
<td>自定义旋转速度、旋转效果，需要使用 jQuery.easing.js</td>
<td>无</td>
</tr>
<tr>
<td>duration</td>
<td>整数</td>
<td>旋转持续时间，以毫秒为单位</td>
<td></td>
</tr>
<tr>
<td>callback</td>
<td>函数</td>
<td>旋转完成后的回调函数</td>
<td>无</td>
</tr>
<tr>
<td>getRotateAngle</td>
<td>函数</td>
<td>返回旋转对象当前的角度</td>
<td>无</td>
</tr>
<tr>
<td>stopRotate</td>
<td>函数</td>
<td>停止旋转</td>
<td>无</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<style>
* { margin: 0; padding: 0;}
ul { list-style-type: none;}
a { text-decoration: none; color: #428BCA; color: #1F8902; color: #555; color: #21B384; color: #444;}
a:hover { text-decoration: underline; color: #6cc30d; color: #198764;}
em, i { font-style: normal;}
img { border: 0 none;}
table { border-spacing: 0; border-collapse: collapse;}
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block}

body { border-top: 50px solid #323436; border-bottom: 50px solid #323436; font: 14px/24px Consolas,"Microsoft Yahei",Arial,"宋体"; color: #666; background-color: #f1f1f1;}

.hd, .ft { width: 1260px; height: 50px; margin-left: auto; margin-right: auto;}
.hd { position: relative; margin-top: -50px;}
.hd h1 { float: left; margin-right: 20px;}
.hd h1 a { float: left; width: 123px; height: 34px; margin-top: 8px; text-indent: -9999px; background-image: url(images/logo2.png);}
.nav { float: left;}
.nav li { float: left; margin-right: 1px;}
.nav a { float: left; padding: 0 25px; line-height: 50px; color: #cecece;}
.nav .cur, .nav a:hover { background-color: #4e4f51; text-decoration: none;}

.search { float: right; width: 320px; margin-top: 10px;}
.search form { float: left; margin-right: 10px; background-color: #434649;}
.search .key { float: left; width: 122px; height: 14px; padding: 9px; border: medium none; line-height: 14px; color: #8b8d90; background-color: transparent;}
.search .go { float: left; width: 30px; height: 32px; border: medium none; text-indent: -9999px; background: url(images/yy-icon.png) -350px -176px no-repeat; cursor: pointer;}
.search a { float: left; width: 70px; height: 32px; line-height: 32px; text-align: center; color: #acacac; background-color: #505050;}
.search a:hover { color: #fff;}
.search .reg { color: #fff; background-color: #6cc30d; background-color: #21B384;}
.search .reg:hover { text-decoration: none; background-color: #198764; background-color: #1FA67A;}
/*.search .login { color: #fff; background-color: #1FA67A;}*/

.main { width: 1260px; margin: 20px auto; overflow: hidden;}

.list1 { overflow: hidden; zoom: 1; margin: -20px 0 0 -20px;}
.list1 li { float: left; width: 300px; height: 250px; margin: 20px 0 0 20px; border-bottom: 1px solid #ddd; background-color: #fff; display: inline;}
.list1 h2 { height: 24px; margin: 10px 10px 5px; font-size: 12px; font-weight: 500; overflow: hidden;}
.list1 h2 a { color: #454545;}
.list1 img { display: block; width: 300px; height: 180px;}
.list1 p { height: 24px; margin: 0 10px; font-size: 12px; color: #bfbfbf;}
.list1 .description { display: none;}
.list1 time { float: left;}
.list1 .view { float: right;}
.list1 .view span { margin-left: 5px;}

.list2 { padding-bottom: 15px; overflow: hidden; zoom: 1;}
.list2 li { float: left; width: 286px; margin: 20px 0 0 20px; background-color: #fff;}
.list2 h4 { height: 24px; margin: 10px 0 5px; font-size: 12px; font-weight: 500; overflow: hidden;}
.list2 h4 a { color: #454545;}
.list2 img { display: block; width: 286px; height: 172px;}
.list2 p { height: 24px; margin: 0 10px; font-size: 12px; color: #bfbfbf;}
.list2 time { float: left;}
.list2 .view { float: right;}

/*.main { float: left; width: 940px;}*/
.primary { float: left; width: 940px;}
.article { background-color: #fff; padding: 20px;}
.article h1 { font: 500 26px "Microsoft Yahei"; text-align: center;}
.article p.info { margin: 10px 0; padding-bottom: 10px; border-bottom: 1px solid #eee; color: #999; font-size: 12px; text-align: center;}
.article p.info span { margin: 0 10px;}
.article h2 { padding-bottom: 10px; border-bottom: 1px solid #ddd; font: 700 18px "Microsoft Yahei"; margin: 24px 0;}
.article h3 { font: 500 16px "Microsoft Yahei"; margin: 24px 0;}
.article h4 { font-size: 14px;}
.article img { display: block; margin: 0 auto;}
.article a { color: #6cc30d; color: #21B384;}
.article a:hover { color: #198764;}
.vad { text-align: center; font-size: 0;}
.vad a { display: inline-block; width: 180px; height: 40px; margin: 0 10px; line-height: 40px; text-align: center; font-size: 14px; color: #fff !important; background-color: #AAE16D; background-color: #EB8E73; background-color: #95E144; background-color: #3EB0D8; background-color: #70CA10; background-color: #21B384;}
.vad a:hover { text-decoration: none; background-color: #6cc30d; background-color: #EB6C47; background-color: #6CC30D; background-color: #198764; background-color: #1d9d74; background-color: #1FA67A;}
.article .vad .bdsharebuttonbox { display: inline-block; margin: 0 10px; vertical-align: top;}
.article .vad .bdshare-button-style0-24 a { height: 40px; margin: 0 !important; padding: 0; line-height: 40px; font-size: 14px; background-image: none;}
.article p { margin: 24px 0;}
.article .thead { width: 728px; margin: 0 auto;}
.article table { width: 100%;}
.article th, .article td { padding: 10px; border: 1px solid #ddd;}
.article ul, article ol { padding-left: 30px;}
.article ul { list-style-type: disc;}
.article ol { list-style-type: decimal;}
.article .browsers { text-align: center;}
.article pre { padding: 10px; border: 1px solid #f0f0f0; font: 13px/24px Consolas,"Lucida Sans Typewriter","Lucida Console",Monaco,"Bitstream Vera Sans Mono",monospace; background-color: #f8f8f8;}

.tag a { display: inline-block; margin-right: 10px; padding: 0 10px; background-color: #EDEDED; color: #838383;}
.tag a:hover { background-color: #65686a; color: #fff; text-decoration: none;}

.xg { margin-top: 20px; background-color: #fff;}
.xg .tt1 { margin-bottom: 0; color: #444;}

.secondary { float: right; width: 300px; font-size: 12px;}

.slidebar { margin-bottom: 20px; overflow: hidden; zoom: 1;}
.slide { float: left; width: 940px;}
.slidebar img { display: block;}
.slidebar .thead { float: right; width: 300px;}

/* 侧边栏 */
.secondary { float: right; width: 300px; margin-top: -20px;}
/*aside { margin-top: -20px;}*/
.asd1 { margin-top: 20px; background-color: #fff;}
.asd1 h3 { border-bottom: 1px solid #D1D1D1; font: 16px "Microsoft Yahei";}
.asd1 h3 span { position: relative; top: 1px; display: inline-block; padding: 10px 15px; border-bottom: 1px solid #636363; color: #444;}
.asd1 ul { overflow: hidden; zoom: 1;}
.asd1 li { height: 48px; margin: 15px; overflow: hidden;}
.asd1 img { float: left; width: 80px; height: 48px; margin-right: 10px;}

.asd2 { margin-top: 20px; background-color: #fff;}
.asd2 h3 { margin-bottom: 15px; border-bottom: 1px solid #D1D1D1; font: 16px "Microsoft Yahei";}
.asd2 h3 span { position: relative; top: 1px; display: inline-block; padding: 10px 15px; border-bottom: 1px solid #636363; color: #444;}
.asd2 li { text-align: center; margin-top: 15px;}
.asd2 img { display: block; width: 270px; height: 162px; margin: 0 auto 5px;}
.asd2 ul { padding-bottom: 15px;}
.asd2-1 li { text-align: left;}

.asd3 { margin-top: 20px; background-color: #fff;}
.tt1 { margin-bottom: 15px; border-bottom: 1px solid #D1D1D1; font: 16px "Microsoft Yahei";}
.tt1 span { position: relative; top: 1px; display: inline-block; padding: 10px 15px; border-bottom: 1px solid #636363;}

.tt2 { height: 44px; margin: 20px 0 20px; line-height: 44px; border-bottom: 2px solid #21B384; background: #E8E8E8; overflow: hidden;}
.tt2 h2 { float: left; padding: 0 25px; font: 18px/44px "Microsoft Yahei"; color: #fff; background-color: #21B384;}
.tt2 h2 a { color: #fff; text-decoration: none;}
.tt2 span { float: left; font-size: 0;}
.tt2 span a { margin-left: 20px; font-size: 12px; color: #999;}

.tt3 { height: 44px; margin: 20px 0 20px; line-height: 44px; border-bottom: 2px solid #21B384; background: #E8E8E8; overflow: hidden;}
.tt3 h2 { float: left; padding: 0 20px; font: 18px/44px "Microsoft Yahei"; color: #444;}


.list3 li { margin: 15px; padding-left: 60px; min-height: 50px; padding-bottom: 15px; border-bottom: 1px solid #eee; line-height: 22px;}
.list3 img { float: left; width: 50px; height: 50px; margin-left: -60px;}
.list3 em { display: block;}
/*.list3 em a { color: #1F8902; color: #6cc30d;}*/

.wp-pagenavi { zoom: 1; padding-top: 20px; text-align: right;}
.wp-pagenavi:after { content: ""; display: block; clear: both; height: 0; visibility: hidden }
.wp-pagenavi a, .wp-pagenavi span { display: inline-block; height: 14px; padding: 8px 9px; line-height: 14px; font-family: "Microsoft Yahei"; margin-left: 5px; /*vertical-align: bottom;*/}
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active, .wp-pagenavi .pages { text-decoration: none; color: #a9a9a9; background-color: #FFF; font-size: 14px; width: auto!important; width: 12px; white-space: nowrap; min-width: 12px; text-align: center }
.wp-pagenavi a:hover { color: #fff; background-color: #999;}
.wp-pagenavi span.current { color: #fff; background-color: #6bc30d; font-size: 14px; width: auto!important; width: 12px; white-space: nowrap; min-width: 12px; text-align: center; background-color: #21B384;}
.wp-pagenavi span.extend {color: #a9a9a9;}

.ft { height: 50px; margin-bottom: -50px; line-height: 50px; color: #cecece;}
.ft p { float: left; margin: 0;}
.gotop { float: right; width: 40px; height: 40px; margin: 5px -40px 0 0; line-height: 40px; background: #434649 url(images/yy-icon.png) -90px -100px no-repeat; text-indent: -9999px;}





/*@font-face{font-family:'FontAwesome';src:url('fonts/fontawesome-webfont.eot?v=4.1.0');src:url('fonts/fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),url('fonts/fontawesome-webfont.woff?v=4.1.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.1.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
.fa{display:inline-block;font-family:FontAwesome; *font-family: "Microsoft Yahei"; font-style:normal; line-height: 1; *line-height: normal;font-weight:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.fa { position: relative; margin-right: 3px; *margin-right: 0; font-size: 0; *font-size: 12px; padding-left: 14px; *padding-left: 0;}
.fa:before { position: absolute; left: 0; top: -11px; *top: 0; font-size: 14px;}
.fa-calendar-o:before {content:"\f133"}
.fa-eye:before {content:"\f06e"}
.fa-comment-o:before { content:"\f0e5"}
.fa-folder-open-o:before{content:"\f115"}
.fa-clock-o:before { content: "\f017"}*/

.tongji { display: none;}


/* 分享 */
.article .bdsharebuttonbox { margin-bottom: 0;}
.bdsharebuttonbox .s1 { float: left;}
.bdshare-button-style0-24 a, .bdshare-button-style0-24 .bds_more { margin: 0 6px 0 0 !important;}

/* 最新评论 */
.ds-recent-comments { margin: 0 15px;}
#ds-recent-comments li.ds-comment { padding: 15px 0 15px 60px !important; border-top: 0 !important; border-bottom: 1px solid #eee;}
</style>
</html>

2 使用示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery制作谷歌浏览器图片旋转插件jqueryrotate - xw素材网</title>

<script type="text/javascript" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/js/jquery.rotate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

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

$("#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);


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();


$("#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})
        }
     } 
   
});

});
</script>


</head>

<body>
<img id="img1" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>
<img id="img2" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256" />
<img id="img3" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>
<img id="img4" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>
<img id="img5" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>
<img id="img6" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>
<img id="img7" src="http://www.xwcms.net/webAnnexImages/fileAnnex/20140412/74794/images/chrome.png" width="256" height="256"/>

</body>
</html>

jquery-rotate图片旋转动画

猜你喜欢