jquery.rotate.js实现旋转动画

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

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

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

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

$('#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 @ 2018-09-14 17:51  聪明的娃  阅读(4437)  评论(0编辑  收藏  举报