jQuery+css3實現轉動的正方形效果(附demo源碼下載)

首頁

web前端

js教程

jQuery+css3實現轉動的正方形效果(附demo源碼下載)_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

css3jquery

本文實例講述了jQuery+css3實現轉動的正方形效果。分享給大家參考，具體如下：

主要是應用了css3中的rotate來控制旋轉角度

運作效果截圖如下：

點擊此處查看線上簡報效果。

具體程式碼如下：

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

完整實例程式碼點擊此處本站下載。

更多關於jQuery特效相關內容有興趣的讀者可查看本站專題：《jQuery常見經典特效總結》及《jQuery動畫與特效用法總結》。

希望本文所述對大家jQuery程式設計有所幫助。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn