信鸽网

jQuery+css3实现转动的正方形效果(附demo源码下载)

  作者：bea

本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考，具体如下： 主要是应用到了css3中的rotate来控制旋转角度 运行效果截图如下： 点击此处查看在线演示效果。 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><ht

本文实例讲述了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 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>


完整实例代码点击此处本站下载。


更多关于jQuery特效相关内容感兴趣的读者可查看本站专题：《jQuery常见经典特效汇总》及《jQuery动画与特效用法总结》。


希望本文所述对大家jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: