请在这里查看示例 ☞ 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>