search

Home >Web Front-end >JS Tutorial >jQuery+css3 realizes the rotating square effect (with demo source code download)_jquery

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 15:17:191688browse

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 class="margin1 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin2 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin3 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin4 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin5 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<br />
<img class="margin6 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin7 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin8 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin9 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<br />
<img class="margin10 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin11 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin12 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<br />
<img class="margin13 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<img class="margin14 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
<br />
<img class="margin15 lazy"  src="/static/imghwm/default1.png"  data-src="3.jpg"  alt="" />
</body>
</html>

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.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Dynamically display the current system time based on javascript_javascript skillsNext article：Dynamically display the current system time based on javascript_javascript skills

Related articles

See more