您当前的位置:首页 > 帝国CMS > 个人笔记

jquery一直旋转的特效代码[有演示效果]

最后更新:2021-06-23 17:55:04

推荐指数

价格:0点券

演示地址

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

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)图片旋转不同角度