Question

＆＃13;

img {
  display: block;
  margin: 20px;
  width: 50px;
  height: 50px;
}

.crossRotate {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}

.crossRotate.active {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
    $('.crossRotate').on('click', function(){
    $(this).toggleClass('active');
    });
</script>
<link rel="stylesheet" href="StyleSheet.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" />
</body>
</html>

＆＃13;

你好，我试图让这个图像在点击后旋转180度。我从这里复制了几乎所有内容：http://jsbin.com/bukacesari/edit?html,css,js,output，但它仍然不适合我。你能解释一下我为什么以及如何解决这个问题？这可能是一个愚蠢的问题，但我不知道为什么它不起作用。感谢

Answer 1

您需要等待文档完全加载才能附加click事件，因为您可以使用以下方法之一：

1- jQuery ready事件：

$(document).ready(function() {
    //DOM is fully loaded. you can safely attach events
});

或快捷方式：

$(function() {
    //DOM is fully loaded. you can safely attach events
});

2-将您的脚本放在结束标记</body>之前：

<body>
    <!-- Your HTML Here -->
    <script>
        //The page can be manipulated safely here !
    </script>
</body>

使用$(function() {....})的示例：

img {
  display: block;
  margin: 20px;
  width: 50px;
  height: 50px;
}
.crossRotate {
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  -o-transition-property: -o-transform;
  transition-property: transform;
  outline: 0;
}
.crossRotate.active {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

<!DOCTYPE html>
<html>

<head>
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <link rel="stylesheet" href="StyleSheet.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
    $(function() {
      $('.crossRotate').on('click', function() {
        $(this).toggleClass('active');
      });
    });
  </script>
</head>

<body>
  <img class="crossRotate" src="https://s31.postimg.org/cf0ip4gd7/logo.gif" alt="Cross Menu button" tabindex="1" />
</body>

</html>

单击后使用JavaScript旋转图像

1 个答案: