编程 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 相关文章推荐

10款非常有用的 Ajax 插件分享

Mar 14 Javascript

实现web打印的各种方法介绍及实现代码

Jan 09 Javascript

jQuery中阻止冒泡事件的方法介绍

Apr 12 Javascript

jQuery Mobile弹出窗、弹出层知识汇总

Jan 05 Javascript

JavaScript深度复制（deep clone）的实现方法

Feb 19 Javascript

H5移动端适配 Flexible方案

Oct 24 Javascript

JS 插件dropload下拉刷新、上拉加载使用小结

Apr 13 Javascript

VUE前端cookie简单操作

Oct 17 Javascript

JS中Map和ForEach的区别

Feb 05 Javascript

微信小程序项目实践之验证码倒计时功能

Jul 18 Javascript

javascript闭包的使用之按钮切换功能

Aug 30 Javascript

js使用swiper实现层叠轮播效果实例代码

Dec 12 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

You might like

第十四节--命名空间

2006/11/16 PHP

php关于array_multisort多维数组排序的使用说明

2011/01/04 PHP

初学PHP的朋友经常问的一些问题。不断更新

2011/08/11 PHP

CodeIgniter配置之SESSION用法实例分析

2016/01/19 PHP

使用PHP处理数据库数据如何将数据返回客户端并显示当前状态

2016/02/16 PHP

JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方

2011/09/20 Javascript

JS清空多文本框、文本域示例代码

2014/02/24 Javascript

js对图片base64编码字符串进行解码并输出图像示例

2014/03/17 Javascript

jQuery截取指定长度字符串的实现原理及代码

2014/07/01 Javascript

node.js中的console.warn方法使用说明

2014/12/09 Javascript

jQuery实现3D文字特效的方法

2015/03/10 Javascript

用JavaScript来美化HTML的select标签的下拉列表效果

2015/11/17 Javascript

js实现的页面矩阵图形变换特效

2016/01/26 Javascript

详解vue-Resource（与后端数据交互）

2017/01/16 Javascript

AngularJS全局警告框实现方法示例

2017/05/18 Javascript

vue实现百度搜索功能

2020/12/28 Javascript

浅析python中SQLAlchemy排序的一个坑

2017/02/24 Python

老生常谈Python进阶之装饰器

2017/05/11 Python

Python 由字符串函数名得到对应的函数(实例讲解)

2017/08/10 Python

python3写爬取B站视频弹幕功能

2017/12/22 Python

python中class的定义及使用教程

2019/09/18 Python

Python如何在单元测试中给对象打补丁

2020/08/03 Python

全网最细 Python 格式化输出用法讲解(推荐)

2021/01/18 Python

HTML5新特性之语义化标签

2017/10/31 HTML / CSS

蛋白质世界：Protein World

2017/11/23 全球购物

销售类个人求职信范文

2013/09/25 职场文书

自荐信的两点禁忌

2013/10/30 职场文书

《藏戏》教学反思

2014/02/11 职场文书

幼儿园爱国卫生月活动总结

2014/06/30 职场文书

艺术设计专业毕业生推荐信

2014/07/08 职场文书

生活部的活动方案

2014/08/19 职场文书

投标人法定代表人授权委托书格式

2014/09/28 职场文书

2015年教务工作总结

2015/05/23 职场文书

转变工作作风心得体会

2016/01/23 职场文书

教你漂亮打印Pandas DataFrames和Series

2021/05/29 Python

MongoDB修改oplog大小的四种方法

2022/04/11 MongoDB