编程 Javascript

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

Posted in Javascript onJanuary 27, 2016

本文实例讲述了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+css3实现转动的正方形效果(附demo源码下载)

- Author -

m1870164

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript里 ==与===区别详解

Aug 16 Javascript

html判断当前页面是否在iframe中的实例

Nov 30 Javascript

JavaScript中匿名函数的递归调用

Jan 22 Javascript

轻松玩转BootstrapTable（后端使用SpringMVC+Hibernate）

Sep 06 Javascript

基于Node.js模板引擎教程-jade速学与实战1

Sep 17 Javascript

vue.js 实现评价五角星组件的实例代码

Aug 13 Javascript

jQuery实现的老虎机跑动效果示例

Dec 29 jQuery

ES6 Promise对象的含义和基本用法分析

Jun 14 Javascript

JS Html转义和反转义（html编码和解码）的实现与使用方法总结

Mar 10 Javascript

JavaScript常用工具函数库汇总

Sep 17 Javascript

vue 函数调用加括号与不加括号的区别

Oct 29 Javascript

js面向对象编程OOP及函数式编程FP区别

Jul 07 Javascript

不用一句js代码初始化组件

Jan 27 #Javascript

jQuery实现可以控制图片旋转角度效果(附demo源码下载)

Jan 27 #Javascript

封装属于自己的JS组件

Jan 27 #Javascript

js+css绘制颜色动态变化的圈中圈效果

Jan 27 #Javascript

Bootstrap树形控件使用方法详解

Jan 27 #Javascript

window.onerror()的用法与实例分析

Jan 27 #Javascript

用window.onerror捕获并上报Js错误的方法

Jan 27 #Javascript