jquery-rotate图片旋转动画

来源：互联网发布：淘宝花呗分期额度不够编辑：程序博客网时间：2024/05/21 17:24

使用说明：

<!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>

0 0