我想在按钮点击时将图像旋转90度,180度和360度。
<img class="test" id="image" src="images/image" alt="This is the Display Image" />
我使用过这个脚本,我不喜欢它,因为它只显示一个旋转......
$(document).ready(function() {
$('#image').rotate({maxAngle:25,minAngle:-55,
bind: [
{"mouseover":function(){$(this).rotateAnimation(85); } },
{"mouseout":function(){$(this).rotateAnimation(-35); } }
]
});
});
答案 0 :(得分:8)
$('input').click(function(){
var img = $('img');
if(img.hasClass('north')){
img.attr('class','west');
} else if(img.hasClass('west')){
img.attr('class','south');
} else if(img.hasClass('south')){
img.attr('class','east');
} else if(img.hasClass('east')){
img.attr('class','north');
}
});
小提琴:http://jsfiddle.net/JkHqa/
**如果要合并动画
,请查看JQuery动画功能答案 1 :(得分:2)
试试这个我希望它会有所帮助。
<强> HTML 强>
<img class="test" id="image" src="http://fbhunt.com/images/FBHUNT200.png" alt="This is the Display Image" />
<input type="button" value="click" id="clickme">
<强> JS 强>
$(document).ready(function() {
$(document).on('click','#clickme',function(){
$("#image").css({'transform': 'rotate(90deg)'});
});
});
答案 2 :(得分:1)
或者,您也可以使用CSS 3来实现相同的目标
#div:focus
{
transform: rotate(90deg);
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
答案 3 :(得分:1)
试试这个。 http://code.google.com/p/jqueryrotate/我希望这会对你有所帮助。