时间戳

首页 > 解决方案 > 对象旋转点击JS

javascript - 对象旋转点击JS

问题描述

我有一个问题，我不知道为什么，但脚本不起作用。当我click反对时，他只能右转。Turn right 90 degress.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Awesome</title>
    <link rel="stylesheet" href="style2.css">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
        $('.crossRotate').on('click', function () {
            $(this).toggleClass('active');
        });
    </script>

    <style>
        object {
            width: 10%;
            height: 10%;
        }

        .crossRotate {
            -webkit-transition-duration: 3s;
            -moz-transition-duration: 3s;
            -o-transition-duration: 3s;
            transition-duration: 3s;
        }

        .crossRotate.active {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        body {
            background-color: black;
        }
    </style>
</head>
<body>
<object data="https://i.pinimg.com/originals/81/6d/a5/816da533638aee63cfbd315ea24cccbd.jpg"></object>
</body>
</html>

标签： javascriptjquerycsstransform

解决方案

您是$('.crossRotate').on('在页面加载之前加载的，因此它永远不会命中并且您不会将其包装在一个<script>块中。要么在页面底部加载 JS，要么将其包装在onload. 尝试：

<script>
    $(function(
        $('.crossRotate').on('click', function(){
          $(this).toggleClass('active');
        });
    ));
</script>

推荐阅读