jquery+jquery.rotate實現圖片旋轉效果

本文轉載自查看原文 2018-11-21 14:48 7627 javaScript/ JQuery

首先要下載jquery.min.js 和jquery.rotate.js文件

1、下載地址：

https://www.jb51.net/jiaoben/554113.html

2、導入文件

<script type="text/javascript" src="../js/jquery-2.1.4.js" ></script>
<script type="text/javascript" src="../js/jQueryRotate.js"></script>

3、html界面

<body>
    <div>
        <h4>示例一：鼠標滑過旋轉圖片</h4>
        <img id="img1" src="../imgs/safari.png" />
    </div>
    <br/>
     <div>
        <h4>示例二：圖片無限旋轉</h4>
        <img id="img2" src="../imgs/safari.png" />
    </div>
     <br/>
      <div>
        <h4>示例三：點擊圖片旋轉</h4>
         <img id="img3" src="../imgs/safari.png" />
    </div>
     <br/>
    <div>
        <h4>示例四：旋轉不同角度圖片</h4>
        <img id="img4" src="../imgs/sunset.jpg" width="180" height="150"/> <br/><br/><br/>
        <input type="button" value="順時針旋轉90度" onClick="ImgRotate(0)"/> <br/><br/>
        <input type="button" value="逆時針旋轉90度" onClick="ImgRotate(1)"/> <br/><br/>
        <input type="button" value="順時針旋轉180度" onClick="ImgRotate(2)"/><br/><br/>
        <input type="button" value="順時針旋轉270度" onClick="ImgRotate(3)"/><br/><br/>
    </div>
    
</body>

4、js腳本

<script>
    $(function(){    
    
        //示例三：點擊圖片旋轉角度（這段js放在示例一后面沒有效果，暫不知原因）
        var value = 0;
        $("#img3").rotate({
          bind:
          {
            click: function(){
              value +=90;
              $(this).rotate({ animateTo:value})
            }
          }
        });
        
        //示例一: 鼠標滑過旋轉圖片
        $("#img1").rotate({
          bind:{
            mouseover : function() {
                $(this).rotate({animateTo:180});            
          },
          mouseout : function() {
                $(this).rotate({animateTo:0});            
            }
          }
        });
        
        //示例二：圖片無限旋轉
        var angle = 0;
        setInterval(function(){
            angle+=3;
              $("#img2").rotate(angle);            
          },10);
        });
        
        
        //示例四：圖片旋轉不同角度
        var ImgRotate = function(i){
            switch(i)
            {
                case 0:
                    $('#img4').rotate(90);
                    break;
                case 1:
                    $('#img4').rotate(-90);
                    break;    
                case 2:
                    $('#img4').rotate(180);
                    break;    
                case 3:
                    $('#img4').rotate(270);
                    break;                    
            }
        }
    
</script>

5、實現的效果

1）鼠標滑過旋轉圖片

2）圖片無限旋轉

3）點擊圖片旋轉

4）圖片旋轉不同角度

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jquery.rotate.js實現旋轉動畫 jquery.rotate.js實現旋轉動畫 jquery圖片3D旋繞效果 rotate3Di的操作 jquery實現圖片點擊旋轉 jQuery制作圖片旋轉效果 jquery旋轉插件rotate參數說明 jquery旋轉圖片用jQuery實現旋轉木馬效果(帶前后按鈕和索引按鈕) JQuery——banner旋轉木馬效果 jQuery+CSS實現的圖片滾動效果