单击时旋转图像图标

Question

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

任何帮助将不胜感激！

的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

简洁明快的动画

就个人而言，我不喜欢路易斯过于宽泛和无趣的解决方案。

在这里，我们可以使用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更改为其他内容。

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

请询问是否需要进一步澄清。

Answer 2

在你的css中定义一个旋转的类，然后在点击时切换类，例如：

＆＃13;

＆＃13;

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');
  });
}

＆＃13;

.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);
}

＆＃13;

<div class="container">

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

</div>

＆＃13;

＆＃13;

＆＃13;

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

我updated your 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 lib＆＃34;。