太极旋转-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> ...
随机推荐
- 【笔记】读取properties文件
package com.bshinfo.el.userInfo.util; import java.io.BufferedReader; import java.io.File; import jav ...
- 自己搭建了一个简单实用的Web版记事本
演示播放地址:http://v.youku.com/v_show/id_XMTg0MjY2OTAxNg==.html 技术说明 环境 vs2012开发 sql2008r2数据库 技术 C#基础语言 M ...
- Pyqt 基础功能
总结Pyqt的基础知识 1. Pyqt 设置禁止最大化及禁止拖拽窗口大小 # PyQT禁止窗口最大化按钮: self.setWindowFlags(QtCore.Qt.WindowMinimizeB ...
- Duilib源码分析(一)整体框架
Duilib界面库是一款由杭州月牙儿网络技术有限公司开发的界面开源库,以viksoe项目下的UiLib库的基础上开发(此后也将对UiLib库进行源码分析):通过XML布局界面,将用户界面和处理逻辑彻底 ...
- C#运算符号
double x=5.1e3;// 5.1乘以10 的3次方. x就是 5100 //注 : 5.1e+3=5.1e3=5.1e03=5.1e+03 double y=5.1e-3;// 5.1乘以 ...
- android shape的使用(转)
shape用于设定形状,可以在selector,layout等里面使用,有6个子标签,各属性如下: <?xml version="1.0" encoding="ut ...
- 移动端css知识总结--字体,毛玻璃效果,input和disabled
移动端字体使用: font-family: Helvetica,sans-serif;我看这也是天猫使用的 透过背景看其他元素模糊,自身元素不模糊:-webkit-backdrop-filter: s ...
- Git 创建本地仓库
前面已经搭好环境了,现在我们缺的是一个管理版本控制的仓库.这次的实验是在电脑本地创建本地仓库.指定路径 默认的位置是在你所安装Git的目录下.Git的仓库你可以建在你电脑的任何目录下(最好不要包含有中 ...
- 承接 AutoCAD 二次开发 项目
本人有多年的CAD开发经验,独立完成多个CAD二次开发项目.熟悉.net及Asp.net开发技术,和Lisp开发技术. 现在成立了工作室,独立承接CAD二次开发项目.结项后提供源码及开发文档,有需要的 ...
- C语言中使用系统自带的快排函数
题目 . 德才论 () 宋代史学家司马光在<资治通鉴>中有一段著名的"德才论":"是故才德全尽谓之圣人,才德兼亡谓之愚人,德胜才谓之君子,才胜德谓之小人.凡取 ...