首页
所有分类
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 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
Jan 06 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery div拖拽用法实例
Jan 14 Javascript
基于jQuery实现收缩展开功能
Mar 18 Javascript
SpringMVC+bootstrap table实例详解
Jun 02 Javascript
详解如何使用Node.js编写命令工具——以vue-cli为例
Jun 29 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
Vue h函数的使用详解
Feb 18 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
短信验证码(1) filter(1) reduce(2) SQLite3(1) Tsmoothie(1) Django(9) TextInputLayout(1) Selenium(1) dockerfile(1) 分布式锁(3)
You might like
透析PHP的配置文件php.ini
2006/10/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
实例讲解PHP面向对象之多态
2014/08/20 PHP
typecho插件编写教程（五）：核心代码
2015/05/28 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
PHP7常量数组用法分析
2016/09/26 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
PHP操作Redis数据库常用方法示例
2018/08/25 PHP
如何优雅的使用 laravel 的 validator验证方法
2018/11/11 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft （For:IE5＋ FF1 ）[
2006/12/22 Javascript
一个不错的应用,用于提交获取文章内容，不推荐用
2007/03/03 Javascript
jquery实现简单易懂的图片展示小例子
2013/11/21 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
整理Javascript基础入门学习笔记
2015/11/29 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
微信小程序--组件（swiper）详细介绍
2017/06/13 Javascript
详解JavaScript中的六种错误类型
2017/09/21 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
pycharm 2019 最新激活方式（pycharm破解、激活）
2020/09/22 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python 实现简易的记事本
2020/11/30 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
python装饰器代码深入讲解
2021/03/01 Python
构造器Constructor是否可被override?
2013/08/06 面试题
北京银河万佳Java面试题
2012/03/21 面试题
课外科技活动总结
2014/08/27 职场文书
2015党建工作简报
2015/07/21 职场文书
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
python图像处理 PIL Image操作实例
2022/04/09 Python
CentOS7环境下MySQL8常用命令小结
2022/06/10 Servers