太极旋转-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> ...
随机推荐
- JHChart 1.1.0 iOS图表工具库中文ReadMe
JHChart(最新版本1.1.0) 好吧,的确当前的github上已经存有不少的iOS图表工具库,然而,当公司的项目需要图表时,几乎没有哪个第三方能够完全满足我的项目需求.无奈之下,本人不得不花费一 ...
- wpf listview
<Window x:Class="WpfTutorialSamples.ListView_control.ListViewGridViewSample" xml ...
- 在linux 服务器上用.htaccess文件实现二级域名访问子目录
实现子域名绑定网站子目录的方法有很多,比如可以用js跳转,可以用php实现,可以301跳转等,但最常用的应该是RewriteEngine方式了. 新建一个笔记本命名为.htaccess(在wind ...
- 关于java中多态的理解
java三大特性:封装,继承,多态. 多态是java的非常重要的一个特性: 那么问题来了:什么是多态呢? 定义:指允许不同类的对象对同一消息做出响应.即同一消息可以根据发送对象的不同而采用多种不同的行 ...
- [MVC4]初识.NET MVC4
最近一个月都在专心做unity3d的斗地主游戏,从早到晚,最后总算是搞出来了,其中的心酸只有自己知道.最近才有功夫闲下来,还是学习学习之前的老本行——asp.net,现在用.net做项目流行MVC,而 ...
- local variable 'r' referenced before assignment
这个错误是说r在使用前没有定义 def cateToNum(c): if c == 'M PRO': r = 1 if c == 'F PRO': r = 2 if c == 'M PREMIER': ...
- 安装spark ha集群
安装spark ha集群 1.默认安装好hadoop+zookeeper 2.安装scala 1.解压安装包 tar zxvf scala-2.11.7.tgz 2.配置环境变量 vim /etc/p ...
- MIT 6.828 JOS学习笔记18. Lab 3.2 Part B: Page Faults, Breakpoints Exceptions, and System Calls
现在你的操作系统内核已经具备一定的异常处理能力了,在这部分实验中,我们将会进一步完善它,使它能够处理不同类型的中断/异常. Handling Page Fault 缺页中断是一个非常重要的中断,因为我 ...
- 运用泛型,冒泡排序实现JDK引用类型数组的排序
public class Utils { public static <T extends Comparable<T>> void sortList(List<T> ...
- 【iOS自定义键盘及键盘切换】详解
[iOS自定义键盘]详解 实现效果展示: 一.实现的协议方法代码 #import <UIKit/UIKit.h> //创建自定义键盘协议 @protocol XFG_KeyBoardDel ...