首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

- Author -

m1870164

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

Javascript 相关文章推荐
JQuery优缺点分析说明
Jun 09 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
AngularJS入门教程之过滤器用法示例
Nov 02 Javascript
文件上传,iframe跨域数据提交的实现
Nov 18 Javascript
基于BootstrapValidator的Form表单验证(24)
Dec 12 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
vue中如何去掉空格的方法实现
Nov 09 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
不用一句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
frg-100(1) YB-230(1) YAESU(1) DE1103(2) BCLer(1) 239军机(1) AN-LP1(1) 74HC4066(1) ICF-903L(1) 根德5570(1)
You might like
FirePHP 推荐一款PHP调试工具
2011/04/23 PHP
php 函数中使用static的说明
2012/06/01 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jquery链式操作的正确使用方法
2014/01/06 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
Python中Continue语句的用法的举例详解
2015/05/14 Python
Python函数式编程指南（一）：函数式编程概述
2015/06/24 Python
Python 中Pickle库的使用详解
2018/02/24 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
matplotlib 纵坐标轴显示数据值的实例
2018/05/25 Python
TensorFlow的权值更新方法
2018/06/14 Python
对python tkinter窗口弹出置顶的方法详解
2019/06/14 Python
python字符串查找函数的用法详解
2019/07/08 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
python os模块在系统管理中的应用
2020/06/22 Python
Python经典五人分鱼实例讲解
2021/01/04 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
潘多拉珠宝英国官方网上商店：PANDORA英国
2018/06/12 全球购物
澳大利亚巧克力花束和礼品网站：Tastebuds
2019/03/15 全球购物
英国DIY汽车维修配件网站：DIY Car Service Parts
2019/08/30 全球购物
2015年九一八事变纪念活动实施方案
2015/05/06 职场文书
雨中的树观后感
2015/06/03 职场文书
莫言诺贝尔获奖感言（全文）
2015/07/31 职场文书
诉讼和解协议书
2016/03/23 职场文书
《亲亲我的妈妈》观后感（3篇）
2019/09/26 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
python实现简单的井字棋
2021/05/26 Python