首页
所有分类
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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
css如何让浮动元素水平居中
Aug 07 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
vue.js入门（3）——详解组件通信
Dec 02 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
详解Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
Apr 20 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
Vue组件跨层级获取组件操作
Jul 27 Javascript
JS实现扫雷项目总结
May 19 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
继承(1) AOP(2) redis(3) 动态权限(1) 构造函数(1) 验证表达式(1) Kotlin(1) promise(2) Spring Security(2) XDM(3)
You might like
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
文本溢出插件jquery.dotdotdot.js使用方法详解
2017/06/22 jQuery
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
JavaScript中关于base64的一些事
2019/05/06 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python学习笔记之列表推导式实例分析
2019/08/13 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
给keras层命名,并提取中间层输出值,保存到文档的实例
2020/05/23 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
Python爬虫实战案例之爬取喜马拉雅音频数据详解
2020/12/07 Python
英国空调、除湿机和通风设备排名第一：Air Con Centre
2019/02/25 全球购物
意大利领先的奢侈品在线时装零售商：MCLABELS
2020/10/13 全球购物
创联软件面试题笔试题
2012/10/07 面试题
十佳大学生事迹材料
2014/01/29 职场文书
领导干部考察材料
2014/02/08 职场文书
公司演讲稿开场白
2014/08/25 职场文书
科级干部群众路线教育实践活动个人对照检查材料
2014/09/19 职场文书
2014年教研员工作总结
2014/12/23 职场文书
解放思想大讨论活动总结
2015/05/09 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
Python中的 Set 与 dict
2022/03/13 Python