本文主要是介绍jquery.rotate.js的应用范例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
请在这里查看示例 ☞ rotate示例
使用此插件可以轻松实现“转盘抽奖”的效果，大家可以在网上观看demo，在这里我就不贴代码了
1 支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome
2在高级浏览器下默认使用transform: rotate(0deg);transform-origin: 50% 50% 0px;，低版本ie默认使用VML(ie特有的一种矢量可标记语言，类似svg)实现
3只可使用在img标签上，如果你用的div标签，在ie8-会失去效果，因为VML是只针对图片的
4 easing: function(x, t, b, c, d) {
return (t/d)*c;//线性旋转
}
5如果你想使用其他的缓动效果，可以引入jquery.easing.js插件配合使用
以下演示几种较常用的效果：
<!doctype html>
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>demo</title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="js/jquery.rotate.min.js"></script> </head> <body> <img class="img1" src="../images/a1.png" alt="" width="100" height="100" /> <img class="img2" src="../images/a2.png" alt="" width="100" height="100" /> <img class="img3" src="../images/a3.png" alt="" width="100" height="100" /> <img class="img4" src="../images/a4.png" alt="" width="100" height="100" /> <img class="img5" src="../images/456.png" alt="" width="100" height="100" /> <script> //示例1--静态角度 $(".img1").rotate({ angle: 45 }); //示例2--绑定点击事件 $(".img2").rotate({ bind: { click: function() { $(this).rotate({ angle: 0, animateTo: 180, easing: "" }); } } }); //示例3--定时器 (function() { var angle = 0; var timer = setInterval(function() { angle += 20; $(".img3").rotate(angle); }, 50) })(); //示例4--回调函数 function rotation() { $(".img4").rotate({ //duration: 5000, angle: 0, animateTo: 360, easing: function(x, t, b, c, d) { return (t/d)*c;//线性旋转 }, callback: rotation }); } rotation(); //示例5--点击自增 (function() { var angle = 0; $(".img5").rotate({ bind: { click: function() { angle += 90; $(this).rotate({ animateTo: angle }); } } }); })(); </script> </body>
</html>这篇关于jquery.rotate.js的应用范例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
