单击旋转图像图标

Question

想知道是否有人可以帮助我。 我希望能够单击文本/图标，然后单击，+图标旋转45度以看起来像斧头图标。 第二次单击时，图标旋转回看起来像+图标，依此类推。

任何帮助将不胜感激！

JSFIDDLE

https://jsfiddle.net/d264kt2t/

的HTML

<div class="container">

<div class="pointer">
CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage">
</div>

</div>

的CSS

.container{
  width:100%;
  padding-top:100px;
  padding-bottom:100px;
  background-color:#000;

}

.coolImage{
  height:17px;
  width:17px;
  margin-left:7px;
}

.pointer{
  cursor:pointer;
  text-align:center;
  font-size:20px;
  color:#fff;
}

Answer 1

简洁生动的动画

我个人不喜欢Louys过于冗长和无趣的解决方案。

在这里，有了jQuery，我们可以创建更漂亮的东西：

rotated = false;
$('.pointer').click(function(){
  elem = this;

  $({rotation: 225*rotated}).animate({rotation: 225*!rotated}, {
    duration: 500,
    step: function(now) {
      $(elem).css({'transform' : 'rotate('+ now +'deg)'});
    }
  });
  rotated=!rotated;
});

请参阅JSFiddle或代码段：

 i = 1; $('.pointer').click(function(){ elem = $(this).children("img")[0]; $({rotation: 225*!i}).animate({rotation: 225*i}, { duration: 500, step: function(now) { $(elem).css({'transform' : 'rotate('+ now +'deg)'}); } }); i=!i; }); 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; } .pointer{ cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="pointer"> CLICK ME<img src="https://i.stack.imgur.com/Tgf0C.png" class="coolImage"> </div> </div> 

我们使用jQuery#animate一个“假”对象来生成平滑的动画。 如果要加快或减慢动画的播放duration ，可以将duration更改为其他duration 。

rotated用作替代变量以提供切换功能。

请询问是否需要进一步说明。

Answer 2

在CSS中定义一个轮换的类，然后在点击时切换该类，例如：

 var pointers = document.getElementsByClassName('pointer'); for(var i = 0; i < pointers.length; i++){ pointers[i].addEventListener('click', function(event) { event.target.getElementsByClassName('coolImage')[0].classList.toggle('rotated'); }); } 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; transform:rotate(45) } .pointer{ cursor:pointer; } .rotated { transform: rotate(45deg); } 

 <div class="container"> <div class="pointer"> CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage"> </div> </div> 

Answer 3

这里有一个跨浏览器的工作示例：

 function rotate() { var elm = document.getElementById('imgToRotate'); var className = elm.className; if(className.indexOf('rotate') === -1) { elm.className = elm.className + ' rotate'; } else { elm.className = elm.className.replace(' rotate', ''); } } 

 .container{ width:100%; padding-top:100px; padding-bottom:100px; background-color:#000; text-align:center; font-size:20px; color:#fff; } .coolImage{ height:17px; width:17px; margin-left:7px; } .pointer{ cursor:pointer; } .rotate { transform:rotate(45deg); /* Firefox */ -moz-transform:rotate(45deg); /* Safari and Chrome */ -webkit-transform:rotate(45deg); /* Opera */ -o-transform:rotate(45deg); /* IE9 */ -ms-transform:rotate(45deg); /* IE6,IE7 */ filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; } 

 <div class="container"> <div class="pointer" onclick="rotate()"> CLICK ME<img src="http://www.ssglobalsupply.com/images/plus.png" class="coolImage" id="imgToRotate"> </div> </div> 

JSFiddle https://jsfiddle.net/balasuar/jcwg1h71/

Answer 4

将此代码插入<img>标签：

onclick="this.style['-webkit-transform'] = 'rotate(' + 45 + 'deg)';"

Answer 5

我使用以下脚本更新了您的Fiddle ：

var rotated = false;
$(".pointer").click(function() {
  if (!rotated) {
    $(this).find("img").css({
      "transform": "rotate(45deg)"
    });
  } else {
    $(this).find("img").css({
      "transform": "rotate(0deg)"
    });
  }
  // Toggle the flag
  rotated = !rotated;
});

请注意 ，我还在外部资源中添加了jQuery库”。