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 相关文章推荐
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript定义类的几种方式总结
Jan 06 Javascript
jQuery新的事件绑定机制on()示例应用
Jul 18 Javascript
JavaScript中用sort()方法对数组元素进行排序的操作
Jun 09 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
javascript单页面手势滑屏切换原理详解
Mar 21 Javascript
浅谈JavaScript 浏览器对象
Jun 03 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
微信小程序开发animation心跳动画效果
Aug 16 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
vue解决跨域问题(推荐)
Nov 10 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
一个PHP数组应该有多大的分析
2009/07/30 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
如何取得中文输入的真实长度?
2006/06/24 Javascript
js onpropertychange输入框 事件获取属性
2009/03/26 Javascript
跟着Jquery API学Jquery之一 选择器
2010/04/07 Javascript
纯文字版返回顶端的js代码
2013/08/01 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
JS动画定时器知识总结
2018/03/23 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
react高阶组件添加和删除props
2019/04/26 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[45:40]Ti4 冒泡赛第二天NEWBEE vs NaVi 1
2014/07/15 DOTA
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
python 使用sys.stdin和fileinput读入标准输入的方法
2018/10/17 Python
对python GUI实现完美进度条的示例详解
2018/12/13 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
Bootstrap 学习分享
2012/11/12 HTML / CSS
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
党支部承诺书范文
2014/03/28 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
大学生见习报告范文
2014/11/03 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python
MySQL普通表如何转换成分区表
2022/05/30 MySQL