jquery-rotate圖片旋轉動畫
阿新 • • 發佈：2018-12-22
使用說明：
<!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>