单击按钮可旋转图像

时间:2013-07-15 04:21:29

标签: javascript jquery

我想在按钮点击时将图像旋转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); } }
      ]
   });
});

4 个答案:

答案 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)

试试这个我希望它会有所帮助。

example

<强> 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/我希望这会对你有所帮助。