jquery.rotate.js实现旋转动画

1.页面引入jquery.rotate.js文件, 下载地址:https://files.cnblogs.com/files/zhoujl-5071/jquery.rotate.js(打开这个网址,ctrl+s就好了) 

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

  文件路径根据自己实际情况来写。

2.或页面加载直接执行,或通过绑定事件触发,让目标元素转起来

1
2
3
4
5
6
7
8
9
$('#container').rotate({ 
    bind : {
        mouseover : function(){
             $(this).find(".icon").rotate({animateTo: 180,duration:500});
        }, mouseout : function(){
             $(this).find(".icon").rotate({animateTo: 0,duration:500});
        }
    }
});

  我这里实现的效果是:鼠标移到'#container'上边时,'icon'顺时针旋转180度(用时0.5秒),鼠标移出时逆时针旋转180度(用时0.5秒)。

更多的用法请参考:  https://www.cnblogs.com/cc11001100/p/6354234.html

posted @   聪明的娃  阅读(4481)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示