html5網頁動畫總結--jQuery旋轉插件jqueryrotate

時間 2019-11-06

標籤 html5 html 網頁動畫總結 jquery 旋轉插件 jqueryrotate 欄目 HTML5 简体版

原文原文鏈接

CSS3 提供了多種變形效果，好比矩陣變形、位移、縮放、旋轉和傾斜等等，讓頁面更加生動活潑有趣，再也不一動不動。而後 IE10 如下版本的瀏覽器不支持 CSS3 變形，雖然 IE 有私有屬性濾鏡（filter），但不全面，並且效果和性能都很差。javascript

今天介紹一款 jQuery 插件——jqueryrotate，它能夠實現旋轉效果。jqueryrotate 支持全部主流瀏覽器，包括 IE6。若是你想在低版本的 IE 中實現旋轉效果，那麼 jqueryrotate 是一個很好的選擇。
兼容性html

jqueryrotate 支持全部主流瀏覽器，包括 IE6。jqueryrotate 在高級瀏覽器中使用 CSS3 transform 屬性實現，在低版本 IE 中使用 VML 實現。固然，你可使用 IE 條件註釋，低版本 IE 使用 jqueryrotate，高級瀏覽器則直接使用 CSS3。html5

參數

參數	類型	說明	默認值
angle	數字	旋轉一個角度	0
animateTo	數字	從當前的角度旋轉到多少度	0
step	函數	每一個動畫步驟中執行的回調函數，當前角度值做爲該函數的第一個參數	無
easing	函數	自定義旋轉速度、旋轉效果，須要使用 jQuery.easing.js	無
callback	函數	旋轉完成後的回調函數	無
getRotateAngle	函數	返回旋轉對象當前的角度	無
stopRotate	函數	中止旋轉	無

演示雖然使用的是圖片，但 jqueryrotate 並不僅是能運用在圖片上，其餘元素如 div 等也可使用。同時，你能夠發揮想象，製做出更多關於旋轉的特效。java

代碼

<!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: duration
          return 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>