JS实现太极旋转思路分析


Posted in Javascript onDecember 09, 2016

JS实现太极旋转思路分析

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

思路:

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

JS实现太极旋转思路分析

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

JS实现太极旋转思路分析

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

JS实现太极旋转思路分析

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叠加出来的效果。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
struts2+jquery+json实现异步加载数据(自写)
Jun 24 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
xmlplus组件设计系列之路由(ViewStack)(7)
May 02 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 jQuery
JavaScript队列结构Queue实现过程解析
Mar 07 Javascript
JavaScript监听键盘事件代码实现
Jun 03 Javascript
创建与框架无关的JavaScript插件
Dec 01 Javascript
学习使用bootstrap的modal和carousel
Dec 09 #Javascript
PHP+jquery+ajax实现分页
Dec 09 #Javascript
javascript垃圾收集机制的原理分析
Dec 08 #Javascript
基于JS实现的随机数字抽签实例
Dec 08 #Javascript
利用js+css+html实现固定table的列头不动
Dec 08 #Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 #Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 #Javascript
You might like
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
基于PHP CURL用法的深入分析
2013/06/09 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php去掉URL网址中带有PHPSESSID的配置方法
2014/07/08 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
PHP实现的分页类定义与用法示例
2017/07/05 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
json的结构与遍历方法实例分析
2017/04/25 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序实现的3d轮播图效果示例【基于swiper组件】
2018/12/11 Javascript
js实现车辆管理系统
2020/08/26 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
python统计字符串中指定字符出现次数的方法
2015/04/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python实现石头剪刀布小游戏
2021/01/20 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
HTML5中的websocket实现直播功能
2018/05/21 HTML / CSS
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
电钳工人个人求职信
2014/05/10 职场文书
培训科主任岗位职责
2014/08/08 职场文书
医院合作协议书
2014/08/19 职场文书
学生检讨书怎么写
2015/05/07 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
python 如何执行控制台命令与操作剪切板
2021/05/20 Python