Home / Questions / 74697
Accepted
omaza1990
Asked: 2020-06-01 06:18:19 +0800 CST 2020-06-01 06:18:19 +0800 CST

单击时旋转图像 - DOM - Javascript

  • 772

我有以下 CSS，其中有用于在元素上添加旋转效果的类：

.animal{
    width:200px;
    height:200px;
    margin:25px;
    float:left;
    background-size: contain;
}

.rota{
     transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg); 

     transition: transform 4s;
    -webkit-transition: -webkit-transform 4s;
    -moz-transition: -moz-transform 4s;     
}

除了最初拥有 .animal 类之外，如何添加 .rota 类？

我希望在单击动物时，它会旋转（一圈）。

Javascript/DOM 代码：

/*Exclusivamente usar funciones DOM.*/
//Al cargar el documento, realizamos las funciones en primer lugar dentro de "window.onload".
window.onload = function(){
    //Generamos la tabla en primer lugar.
    crearTabla();

    /*Gestionamos los eventos para cada animal*/
    document.getElementById("cerdo").onclick = sonidoCerdo;
    function sonidoCerdo() {
        //Como añado para que tambien tenga la clase .animal y .rota
    }


    /*Función para lanzar el sonido del cerdo.*/
    function sonidoGato() {
        alert('GATO');
    }
    //Asignar la función externa al elemento con id=gato.
    document.getElementById("gato").onclick = sonidoGato;

    //asi tambien para perro y vaca.
}


/*Exclusivamente con DOM, crear una tabla 2x2 (4 elementos-casillas).*/
function crearTabla() {
    var animales = ["cerdo", "gato", "perro", "vaca"];
    //Obtener la referencia del elemento body.
    var body = document.getElementsByTagName("body")[0];
    //Creamos el elemento/objeto que deseamos: <div>.
    var div = document.createElement("div");
    //Asignamos un id al div creado.
    div.setAttribute("id", "animales");
    //Agregamos al body el div.
    body.appendChild(div);

    //Crea un elemento <table> y un elemento <tbody>.
    var tabla = document.createElement("table");
    var tblBody = document.createElement("tbody");

    //Crea las celdas. 
    var contador = 0;
    for (var i=0; i<2; i++) {
        var hilera = document.createElement("tr"); 
        for (var j=0; j<2; j++) {
            //Creamos el elemento <td> por cada celda.
            var celda = document.createElement("td");
            //Creamos el elemento <img> al cual asociamos el atributo de la ruta de la imagen.
            var imagenAnimal = document.createElement("img");
            imagenAnimal.setAttribute("src", "./images/"+animales[contador]+".png");    
            //Creamos el elemento <audio> al cual asociamos un elemento <source>.
            var audioAnimal = document.createElement("audio");
            var sourceAnimal = document.createElement("source");
            sourceAnimal.setAttribute("src", "./sounds/"+animales[contador]+".wav");
            sourceAnimal.setAttribute("type", "audio/wav");
            //Al audioAnimal le añadimos el sourceAnimal.
            audioAnimal.appendChild(sourceAnimal);
            //Creamos el elemento <div> para cada animal al cual asociamos un id y una clase.
            var divAnimal = document.createElement("div"); 
            divAnimal.setAttribute("id", animales[contador]);           
            divAnimal.setAttribute("class", "animal");
            //Al divAnimal le añadimos la imagen del animal.
            divAnimal.appendChild(imagenAnimal);
            //A la celda le añadimos el divAnimal.
            celda.appendChild(divAnimal); 
            //A la hilera "tr" le añadimos la celda "td".
            hilera.appendChild(celda);
            contador++;
        } 
        //Agrega la hilera al final de la tabla (al final del elemento tblbody). 
        tblBody.appendChild(hilera); 
    }

    //Posiciona el <tbody> debajo del elemento <table>.
    tabla.appendChild(tblBody);
    //appends <table> into <body>.
    div.appendChild(tabla);
    //Modifica el atributo "border" de la tabla y lo fija a "2";
    tabla.setAttribute("border", "2");
}
javascript

1 Answers

  1. Best Answer

    使用 DOM，根据您拥有的代码，您应该添加以下内容：

    div.className += " rota";

    基本上你将一个空白空间和新类连接到你的class="animal", 离开class="animal rota".

    然后，如果您需要删除它，您可以返回到div.className = "animal";将仅用“动物”覆盖上面的内容

    • 2