太极旋转-JS实现

刚学了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实现的更多相关文章
- wap版和pc版的旋转js
<script type="text/javascript"> var evt = "onorientationchange" in window ...
- 图片旋转js代码
function rotateImage(imgId) { imageToRotate = document.getElementById(imgId); imageToRotate.style.fi ...
- 用javascirpt画个太极
偶然看到用代码画太极,感觉很有趣,用JS写了一个 过程很简单,画了张图,应该一看就懂了 代码也很简单,如下,注释很多 function TaiJi(r,canvas){ this.r = r; thi ...
- 最流行的Node.js应用开发框架简介
最流行的Node.js应用开发框架简介 快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.j ...
- 当今最流行的Node.js应用开发框架简介
快速开发而又容易扩展,高性能且鲁棒性强.Node.js的出现让所有网络应用开发者的这些梦想成为现实.但是,有如其他新的开发语言技术一样,从头开始使用Node.js的最基本功能来编写代码构建应用是一个非 ...
- html5 jqueryrotate插件实现旋转动画
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- h5屏幕旋转的时间和样式的设置
好几天没更新博客了,今天写写小感悟和一个小东西吧! 随着前端的前端的越来越火,对前端的要求也越来越高,从之前的切图到开发网站再到现在移动端开发,微信开发,手机app混合开发,不得不说现在前端在开发行业 ...
- [书目20131223]Android、iPhone、Windows Phone手机网页及网站设计:最佳实践与设计精粹 - 张亚飞
目录 第I篇 手机版专用网站设计和开发入门篇 第1章 准备创作环境和测试环境 3 1.1 使用Mobile Safari测试网页 4 1.1.1 iOS Simulator安装 5 1.1.2 使用M ...
- 太极图HTML+CSS(可旋转)代码记录
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- "传成老树白茶"献礼母亲节 邀市民品茗感受茶文化
5月8日下午,传成老树白茶巡回中国公益品鉴会第七十站,走进福州马尾区东方名城传成老树白茶文化馆. 本次品鉴会活动以“感恩母亲节”为主题,以马尾船政文化为背景,邀福州市民一起品鉴白茶,感受中国茶文化. ...
- iOS书写高质量代码之耦合的处理
原创 2016-12-26 MrPeak MrPeak杂货铺 耦合是每个程序员都必须面对的话题,也是容易被忽视的存在,怎么处理耦合关系到我们最后的代码质量.今天Peak君和大家聊聊耦合这个基本功话题, ...
- Oracle Database 12c Release 1下载安装(自身经历)
1.访问Oracle官网:https://www.oracle.com/index.html,下载Oracle Database 12c Release 1 (注意:File1和File2都要下载!! ...
- hive 复杂类型
hive提供一种复合类型的数据 struct:可以使用"."来存取数据 map:可以使用键值对来存取数据 array:array中存取的数据为相同类型,其中的数据可以通过下表获取数 ...
- [Python数据分析]新股破板买入,赚钱几率如何?
这是本人一直比较好奇的问题,网上没搜到,最近在看python数据分析,正好自己动手做一下试试.作者对于python是零基础,需要从头学起. 在写本文时,作者也没有完成这个小分析目标,边学边做吧. == ...
- 马氏距离(Mahalanobis distance)
马氏距离(Mahalanobis distance)是由印度统计学家马哈拉诺比斯(P. C. Mahalanobis)提出的,表示数据的协方差距离.它是一种有效的计算两个未知样本集的相似度的方法.与欧 ...
- (4)WebApi 跨域问题
在做Web开发中,常常会遇到跨域的问题,到目前为止,已经有非常多的跨域解决方案. 通过自己的研究以及在网上看了一些大神的博客,写了一个Demo 首先新建一个webapi的程序,如下图所示: 由于微软已 ...
- 【Java EE 学习 82 下】【MAVEN整合Eclipse】【MAVEN的一些高级概念】
一.MAVEN整合Eclipse MAVEN是非常优秀,但是总是要开命令行敲命令是比较不爽的,我们已经习惯了使用IDE,所以还有一种将MAVEN整合到Eclipse的方法. 详情查看:http://w ...
- 解决一则enq: TX – row lock contention的性能故障
上周二早上,收到项目组的一封邮件: 早上联代以下时间点用户有反馈EDI导入"假死",我们跟踪了EDI导入服务,服务是正常在跑,可能是处理的慢所以用户感觉是"假死" ...
- 收缩SQL Server数据库文件
收缩整个数据库 DBCC SHRINKDATABASE (dbName) 收缩单个文件DBCC SHRINKFILE (FileName) 查找所有的文件名称USE dbNameEXEC sp_hel ...