注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

jQuery旋转插件jqueryrotate应用

动画 fishcity 2063浏览

jQuery旋转插件jqueryrotate

一款基于jquery的旋转插件jquery.rotate应用,它可以使图片任意角度旋转,非常动感,是博客头像和空间头像个性化的必备应用。幸运的是此插件全是JS制控,不是基于CSS3,所以说可以兼容很多浏览器,下面jQ酷和大家一起来看下使用的方法。

首先引入核心库文件,记得引入最前的是jquery

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.rotate.min.js"></script>

构建html,本例的html非常简单,插入图片,写上ID就OK了

<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"/>
<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"/>

写入JS

//演示1 直接旋转一个角度
$('#img1').rotate(45);

//演示2 鼠标移动效果
$('#img2').rotate({ 
    bind : {
        mouseover : function(){
            $(this).rotate({animateTo: 180});
        }, mouseout : function(){
            $(this).rotate({animateTo: 0});
        }
    }
});

//演示3 不停旋转
var angle = 0;
setInterval(function(){
    angle +=3;
    $('#img3').rotate(angle);
}, 50);


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){
            return c*(t/d)+b;
        }
    });
}
rotation2();


//演示4 点击旋转
$('#img6').rotate({ 
    bind: {
        click: function(){
            $(this).rotate({
                angle: 0,
                animateTo: 180,
                easing: $.easing.easeInOutExpo
            });
        }
    }
});


var value2 = 0;
$('#img7').rotate({ 
    bind: {
        click: function(){
            value2 +=90;
            $(this).rotate({
                animateTo: value2
            });
        }
    }
});

实际的效果可以看实例,或是自己动手试下!

转载请注明:jQ酷 » jQuery旋转插件jqueryrotate应用

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。