在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5/ 移動端使用js綁定事件控制圖片的旋轉(zhuǎn)

移動端使用js綁定事件控制圖片的旋轉(zhuǎn)

我用了css3 的animation 讓圖片360deg循環(huán)旋轉(zhuǎn) 在頁面剛進來的時候一直是旋轉(zhuǎn)的 我給這圖片綁定一個觸摸點擊事件 當(dāng)點擊圖片的時候會停止旋轉(zhuǎn) 再點的時候又開始旋轉(zhuǎn) 這個怎么實現(xiàn)呢

<div class="item item-1">
    <div class="music-pic">
        <img src="./images/musicButtom.png" alt="" id="routate-pic"></div>
    </div>
</div>
 .wrap .item-1 .music-pic img {
    display: block;
    width: 80%;
    animation: Routate 3s linear infinite;
    -webkit-animation: Routate 3s linear infinite;
    transform:rotate(360deg);
 -ms-transform:rotate(360deg);
 -moz-transform:rotate(360deg);
 -webkit-transform:rotate(360deg);
 -o-transform:rotate(360deg);
}
@keyframes Routate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes Routate {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
\\ 獲取img
var routtePic = document.getElementById('routate-pic');
回答
編輯回答
舊言

旋轉(zhuǎn)寫在單獨的類名里，點擊判斷classList里是否有這個類：有則減之，無則加之。

2018年5月21日 18:33
編輯回答
尋仙

首先將anmation的樣式類抽出來

.rotate {
    animation: Routate 3s linear infinite;
}

// 綁定點擊事件

var img = doucument.getElementById('img');
img.onclick = function() {
  var cm = img.className || ''; 
  if (cm.indexOf('rotate') > -1) {
    img.className = cm.split('rotate').join(' '); // 刪除動畫類
  } else {
    img.className = cm + ' rotate'; // 添加類
  }
}
2018年8月27日 23:54