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


Posted in Javascript onJanuary 27, 2016

本文实例讲述了jQuery+css3实现转动的正方形效果。分享给大家供大家参考,具体如下:

主要是应用到了css3中的rotate来控制旋转角度

运行效果截图如下:

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

点击此处查看在线演示效果。

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
jqgrid 表格数据导出实例
Nov 21 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
ajax实现加载页面、删除、查看详细信息 bootstrap美化页面!
Mar 14 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
使用Vue.js和Element-UI做一个简单登录页面的实例
Feb 23 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
vue自定义指令之面板拖拽的实现
Apr 14 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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
Symfony2中被遗弃的getRequest()方法分析
2016/03/17 PHP
通过ifame指向的页面高度调整iframe的高度
2006/10/05 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
深入浅析JavaScript中的scrollTop
2016/07/11 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
vue mounted 调用两次的完美解决办法
2018/10/29 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python中常见的数据类型小结
2015/08/29 Python
python编程实现归并排序
2017/04/14 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
PyQt5中QSpinBox计数器的实现
2021/01/18 Python
HTML5本地存储之IndexedDB
2017/06/16 HTML / CSS
Tiqets荷兰:出售欧洲最美丽的景点和博物馆门票
2018/01/09 全球购物
美国特价机票专家:Airfarewatchdog
2018/01/24 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
教代会开幕词
2015/01/28 职场文书
布达拉宫的导游词
2015/02/02 职场文书
好员工观后感
2015/06/17 职场文书
《中华上下五千年》读后感3篇
2019/11/29 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
Python实现简单的猜单词
2021/06/15 Python