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

更新时间：2016年01月27日 15:03:39 作者：m1870164

这篇文章主要介绍了jQuery+css3实现转动的正方形效果,可实现图片组集体转动的功能,通过jQuery结合时间函数定时操作css3属性实现旋转效果,并附带demo源码供读者下载,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

jquery实现简单的拖拽效果实例兼容所有主流浏览器
拖拽效果个人觉得是一种不错的用户体验，抽空研究了一下，原理还蛮简单的，具体实现如下，感兴趣的朋友可以参考下哈
2013-06-06
jquery实现tab菜单切换内容(精简版demo)
这篇文章主要为大家介绍了jquery实现tab菜单切换内容的精简方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-10-10
jQuery插件实现图片轮播特效
浏览各大网站，很多都少不了轮播效果，如何控制这些图片在一个方向上连续的滚动？这篇文章就为为大家详细介绍了jQuery插件实现图片轮播特效的代码，感兴趣的小伙伴们可以参考一下
2016-06-06
基于jQuery实现表格的排序
本篇文章介绍了jQuery实现表格的排序方法与主要思路，相信会对大家有所帮助，下面就跟小编一起来看看吧
2016-12-12
jQuery ajax dataType值为text json探索分享
ajax dataType值为text json的使用是怎么样的，在本文将为大家想你想介绍下，感兴趣的朋友不要错过
2013-09-09
jQuery中的CSS-DOM操作
这篇文章介绍了jQuery中的CSS-DOM操作，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-03-03
jQuery列表检索功能实现代码
要实现一个简单的列表，右上角有一个检索功能我们要实现的是列表检索功能，具体实例代码大家参考下本文
2017-07-07
jquery attr方法获取input的checked属性问题
如果使用jquery,应使用prop方法来获取和设置checked属性，不应使用attr,需要的朋友可以参考下
2014-05-05
jQuery实现左右切换焦点图
这篇文章主要介绍了jQuery实现左右切换焦点图的核心代码，有需要的小伙伴可以参考下
2015-04-04
jquery树形菜单效果的简单实例
下面小编就为大家带来一篇jquery树形菜单效果的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06