刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。

  思路:

  1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。

  2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。

  3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。

  4.设置定时器:

//旋转角度
var deg = 0 //设置定时器,100毫秒动一次
var tid = setInterval(function(){
var clock_dfc = document.getElementById("clock-dfc"); clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改变转盘属性
deg -=30;//每次赚30度
},100);

  5.小结:就是简单的CSS叠加出来的效果。

  代码分享:http://download.csdn.net/detail/qq_15259489/9705046

太极旋转-JS实现的更多相关文章

  1. wap版和pc版的旋转js

    <script type="text/javascript"> var evt = "onorientationchange" in window ...

  2. 图片旋转js代码

    function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...

  3. 用javascirpt画个太极

    偶然看到用代码画太极,感觉很有趣,用JS写了一个 过程很简单,画了张图,应该一看就懂了 代码也很简单,如下,注释很多 function TaiJi(r,canvas){ this.r = r; thi ...

  4. 最流行的Node.js应用开发框架简介

    最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...

  5. 当今最流行的Node.js应用开发框架简介

    快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...

  6. html5 jqueryrotate插件实现旋转动画

    CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...

  7. h5屏幕旋转的时间和样式的设置

    好几天没更新博客了,今天写写小感悟和一个小东西吧! 随着前端的前端的越来越火,对前端的要求也越来越高,从之前的切图到开发网站再到现在移动端开发,微信开发,手机app混合开发,不得不说现在前端在开发行业 ...

  8. [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞

    目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...

  9. 太极图HTML+CSS(可旋转)代码记录

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. ios语音识别

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px Menlo; color: #000000; min-height: 15.0px } p.p ...

  2. MySQL Fabric和MyBatis的整合过程中遇到的问题

    这是我昨天在整合MySQL Fabric和MyBatis时遇到的问题,花了大半天才解决的问题,解决的过程中在网上查找了很久,都没有找到解决的方案.现在记下来,希望能够帮助有同样问题的朋友.如果各位朋友 ...

  3. php barcode 制作二条码,隐藏条码的内容,只保留条码

    <?php global $_W, $_GPC; $operation = !empty($_GPC['op']) ? $_GPC['op'] : 'display'; require_once ...

  4. Mittag-Leffler定理,Weierstrass因子分解定理和插值定理

    Mittag-Leffler定理    设$D\subset\mathbb C$为区域,而$\{a_{n}\}$为$D$中互不相同且无极限点的点列,那么对于任意给定的一列自然数$\{k_{n}\}$, ...

  5. Launch Mode

    1.standard standard的加载模式不管是否已经存在Activity都会再次创建一个Acitivy,同时将新创建的Activity加入栈顶. 所以在这种加载模式下需要多次返回才能退出. 2 ...

  6. ng-table 简单实例

    今天用的AngularJs需要做个分页,于是用ng-table去实现,不过这个官网感觉有点坑,说的不够清楚. 下面实现了一个Demo实力,代码如下: <!DOCTYPE html> < ...

  7. JavaScript异步编程的主要解决方案—对不起,我和你不在同一个频率上

    众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...

  8. CozyRSS1.0 - 有可用性版本

    bin:还是不提供了,有兴趣的加QQ群373862115讨论 src:https://github.com/zpublic/cozy/tree/a202ae0944936c1ca56c2c3f4b73 ...

  9. PowerDesigner导出SQL脚本

    1. 先创建E-R图模型

  10. TOP 和 OFFSET 筛选(转)

    SQL Server 对行数的排序提供了 TOP 筛选.SQL Server 2012 新增了 OFFSET 筛选. 一.TOP 筛选 如果有 ORDER BY 子句,TOP 筛选将根据排序的结果返回 ...