jQuery+css3 realizes the rotating square effect (with demo source code download)

jQuery+css3 realizes the rotating square effect (with demo source code download)_jquery

WBOY

Release： 2016-05-16 15:17:19

Original

1568 people have browsed it

The example in this article describes jQuery+css3 to achieve the rotating square effect. Share it with everyone for your reference, the details are as follows:

Mainly applied to rotate in css3 to control the rotation angle

The screenshot of the running effect is as follows:

Click here to view the online demonstration .

The specific code is as follows:

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

Copy after login

Click here for complete example codeDownload from this site.

Readers who are interested in more content related to jQuery special effects can check out the special topics on this site: "Summary of common classic jQuery special effects" and "Summary of jQuery animation and special effects usage".

I hope this article will be helpful to everyone in jQuery programming.