单击后使用JavaScript旋转图像

Question

 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> <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>

您好，我正在尝试使此图像在单击后旋转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 个解决方案

解决方案1
2 已采纳 2016-07-26 00:02:25

单击后使用JavaScript旋转图像

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-07-26 00:02:25

解决方案1
2 已采纳 2016-07-26 00:02:25