jQuery css3 réalise l'effet carré rotatif (avec téléchargement du code source de démonstration)

jQuery css3 réalise l'effet carré rotatif (avec téléchargement du code source de démonstration)_jquery

WBOY

Libérer： 2016-05-16 15:17:19

original

1578 Les gens l'ont consulté

L'exemple de cet article décrit comment jQuery CSS3 obtient l'effet carré rotatif. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Principalement appliqué à la rotation en CSS3 pour contrôler l'angle de rotation

La capture d'écran de l'effet en cours d'exécution est la suivante :

Cliquez ici pour voir la démonstration en ligne .

Le code spécifique est le suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <style type="text/css" >
    img { width:50px; height:50px; }
    .margin1 { margin-top:50px; margin-left:100px; }
    .margin2 { margin-top:50px; margin-left:100px; }
    .margin3 { margin-top:50px; margin-left:100px; }
    .margin4 { margin-top:50px; margin-left:100px; }
    .margin5 { margin-top:50px; margin-left:100px; }
    .margin6 { margin-top:50px; margin-left:175px; }
    .margin7 { margin-top:50px; margin-left:100px; }
    .margin8 { margin-top:50px; margin-left:100px; }
    .margin9 { margin-top:50px; margin-left:100px; }
    .margin10 { margin-top:50px; margin-left:250px; }
    .margin11 { margin-top:50px; margin-left:100px; }
    .margin12 { margin-top:50px; margin-left:100px; }
    .margin13 { margin-top:50px; margin-left:325px; }
    .margin14 { margin-top:50px; margin-left:100px; }
    .margin15 { margin-top:50px; margin-left:400px; }
  </style>
  <script type="text/javascript" >
    var ADD_ANGLE = 45; // 每次偏移角度
    var angle = 0; // 角度
    window.onload = function () {
      var img = $("img");
      setInterval(function () {
        rotate(img);
      }, 50);
    }
    function rotate(obj) {
      angle += ADD_ANGLE;
      if (angle == 360) {
        angle = 0;
      }
      obj.css({ "transform": "rotate(" + angle + "deg)", "-webkit-transform": "rotate(" + angle + "deg)", "-moz-transform": "rotate(" + angle + "deg)" });
    }
  </script>
</head>
<body>
<img src="3.jpg" alt="" class="margin1" />
<img src="3.jpg" alt="" class="margin2" />
<img src="3.jpg" alt="" class="margin3" />
<img src="3.jpg" alt="" class="margin4" />
<img src="3.jpg" alt="" class="margin5" />
<br />
<img src="3.jpg" alt="" class="margin6" />
<img src="3.jpg" alt="" class="margin7" />
<img src="3.jpg" alt="" class="margin8" />
<img src="3.jpg" alt="" class="margin9" />
<br />
<img src="3.jpg" alt="" class="margin10" />
<img src="3.jpg" alt="" class="margin11" />
<img src="3.jpg" alt="" class="margin12" />
<br />
<img src="3.jpg" alt="" class="margin13" />
<img src="3.jpg" alt="" class="margin14" />
<br />
<img src="3.jpg" alt="" class="margin15" />
</body>
</html>

Copier après la connexion

Cliquez ici pour l'exemple de code completTéléchargez depuis ce site.

Les lecteurs intéressés par plus de contenu lié aux effets spéciaux jQuery peuvent consulter les sujets spéciaux sur ce site : "Résumé des effets spéciaux jQuery classiques courants" et "Résumé de l'animation jQuery et utilisation d'effets spéciaux".

J'espère que cet article sera utile à tous ceux qui programment jQuery.