html5网页动画总结--jQuery旋转插件jqueryrotate
生活随笔
收集整理的這篇文章主要介紹了
html5网页动画总结--jQuery旋转插件jqueryrotate
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
CSS3 提供了多種變形效果，比如矩陣變形、位移、縮放、旋轉(zhuǎn)和傾斜等等，讓頁(yè)面更加生動(dòng)活潑有趣，不再一動(dòng)不動(dòng)。然后 IE10 以下版本的瀏覽器不支持 CSS3 變形，雖然 IE 有私有屬性濾鏡（filter），但不全面，而且效果和性能都不好。
今天介紹一款 jQuery 插件——jqueryrotate，它可以實(shí)現(xiàn)旋轉(zhuǎn)效果。jqueryrotate 支持所有主流瀏覽器，包括 IE6。如果你想在低版本的 IE 中實(shí)現(xiàn)旋轉(zhuǎn)效果，那么 jqueryrotate 是一個(gè)很好的選擇。
兼容性
jqueryrotate 支持所有主流瀏覽器，包括 IE6。jqueryrotate 在高級(jí)瀏覽器中使用 CSS3 transform 屬性實(shí)現(xiàn)，在低版本 IE 中使用 VML 實(shí)現(xiàn)。當(dāng)然，你可以使用 IE 條件注釋，低版本 IE 使用 jqueryrotate，高級(jí)瀏覽器則直接使用 CSS3。
參數(shù)
| angle | 數(shù)字 | 旋轉(zhuǎn)一個(gè)角度 | 0 |
| animateTo | 數(shù)字 | 從當(dāng)前的角度旋轉(zhuǎn)到多少度 | 0 |
| step | 函數(shù) | 每個(gè)動(dòng)畫步驟中執(zhí)行的回調(diào)函數(shù)，當(dāng)前角度值作為該函數(shù)的第一個(gè)參數(shù) | 無(wú) |
| easing | 函數(shù) | 自定義旋轉(zhuǎn)速度、旋轉(zhuǎn)效果，需要使用 jQuery.easing.js | 無(wú) |
| callback | 函數(shù) | 旋轉(zhuǎn)完成后的回調(diào)函數(shù) | 無(wú) |
| getRotateAngle | 函數(shù) | 返回旋轉(zhuǎn)對(duì)象當(dāng)前的角度 | 無(wú) |
| stopRotate | 函數(shù) | 停止旋轉(zhuǎn) | 無(wú) |
演示雖然使用的是圖片，但 jqueryrotate 并不只是能運(yùn)用在圖片上，其他元素如 div 等也可以使用。同時(shí)，你可以發(fā)揮想象，制作出更多關(guān)于旋轉(zhuǎn)的特效。
代碼
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery旋轉(zhuǎn)插件jqueryrotate</title> <style> /** ease-in-out 規(guī)定以慢速開始和結(jié)束的過(guò)渡效果*/ 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(){ //旋轉(zhuǎn)45度 $('#img1').rotate({angle:45});//鼠標(biāo)滑過(guò)旋轉(zhuǎn)180，離開回0度 $("#img2").rotate({ bind: { mouseover : function() { $(this).rotate({animateTo:180});},mouseout : function() { $(this).rotate({animateTo:0});}} });//慢速旋轉(zhuǎn) var angle = 0; setInterval(function(){angle+=3;$("#img3").rotate(angle); },50);//快速旋轉(zhuǎn)一周，callback回調(diào)有時(shí)間間隔 var rotation = function (){$("#img4").rotate({angle:0, animateTo:360, callback: rotation}); } rotation();//這個(gè)沒搞明白怎么用 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();//點(diǎn)擊后旋轉(zhuǎn)180度 $("#img6").rotate({ bind: { click: function(){$(this).rotate({ angle:0,animateTo:180,easing: $.easing.easeInOutExpo })}} });//每次點(diǎn)擊在原基礎(chǔ)上旋轉(zhuǎn)90度 var value2 = 0 $("#img7").rotate({ bind: {click: function(){value2 +=90;$(this).rotate({ animateTo:value2})}} });//蹺蹺板動(dòng)畫 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>鼠標(biāo)滑過(guò)后旋轉(zhuǎn)，離開后恢復(fù)原位： <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網(wǎng)頁(yè)動(dòng)畫總結(jié)--jQuery旋轉(zhuǎn)插件jqueryrotate</div></body> </html>?
總結(jié)
以上是生活随笔為你收集整理的html5网页动画总结--jQuery旋转插件jqueryrotate的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： jQuery的ajax()、post()
- 下一篇： CentOS-Samba服务