html5网页动画总结--jQuery旋转插件jqueryrotate
生活随笔
收集整理的這篇文章主要介紹了
html5网页动画总结--jQuery旋转插件jqueryrotate
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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: durationreturn 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="images/chrome.png" width="256" height="256"/> <img id="img2" src="images/chrome.png" width="256" height="256" /> <img id="img3" src="images/chrome.png" width="256" height="256"/> <img id="img4" src="images/chrome.png" width="256" height="256"/> <br> <img id="img5" src="images/chrome.png" width="256" height="256"/> <img id="img6" src="images/chrome.png" width="256" height="256"/> <img id="img7" src="images/chrome.png" width="256" height="256"/> <img id="img8" src="images/chrome.png" width="256" height="256"/> <br>鼠標滑過后旋轉，離開后恢復原位： <div class="test"> <img src="images/cardKingClub.png" alt="" width="70" height="100" /> <a herf="#"><img src="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的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery的ajax()、post()
- 下一篇： CentOS-Samba服务