jQuery旋转插件—rotate
jQuery旋转插件,支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome
rotate(angle)
正值表示顺时针方向旋转,负值表示逆时针方向旋转。
使用方法:
旋转到指定角度
$("ID").rotate(45);
<div id="start"><img src="start.png" id="startbtn"></div> <script type="text/javascript"> $(function(){ $("#startbtn").click(function(){ $(this).rotate({ duration:3000, //持续时间 angle:0, //起始角度 animateTo:90, //结束的角度 easing:$.easing.easeOutSine, //定义运动的效果,需要引用jquery.easing.min.js的文件 callback:function(){ //回调函数 alert("结束"); } }) }) }) </script>
更多可以测试:http://jsfiddle.net/RwEme/
防止运行时重复点击
<script type="text/javascript"> $(function() { clickbtn=false; $("#startbtn").live("click",function() { if(clickbtn==false) { clickbtn=true; var a=Math.floor(Math.random()*360); $(this).rotate( { duration:3000, angle:0, animateTo:1000+a, callback:function() { clickbtn=false; alert(clickbtn); } }) } }) }) </script>
应用实例:
2024还活着,挺好的,向着星辰与深渊,加油,博客园不要倒下啊!