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 相关文章推荐
jQuery获取节点和子节点文本的方法
Jul 22 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
Json解析的方法小结
Jun 22 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
Oct 28 Javascript
如何理解Vue简单状态管理之store模式
May 15 Vue.js
学习使用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
PHP 文件扩展名 获取函数
2009/06/03 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
php实现的CSS更新类实例
2014/09/22 PHP
PHP实现的构造sql语句类实例
2016/02/03 PHP
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP执行shell脚本运行程序不产生core文件的方法
2016/12/28 PHP
thinkPHP5.0框架API优化后的友好性分析
2017/03/17 PHP
Javascript Object.extend
2010/05/18 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
深入探究AngularJs之$scope对象(作用域)
2017/07/20 Javascript
React.Js添加与删除onScroll事件的方法详解
2017/11/03 Javascript
vue+vant实现商品列表批量倒计时功能
2020/01/13 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python中内建函数的简单用法说明
2016/05/05 Python
python中的colorlog库使用详解
2019/07/05 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python pandas 列转行操作详解(类似hive中explode方法)
2020/05/18 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
PyQt5的QWebEngineView使用示例
2020/10/20 Python
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
波兰在线儿童和婴儿用品零售商:pinkorblue
2019/06/29 全球购物
.TTL是什么?有什么用处,通常那些工具会用到它?(ping? traceroute? ifconfig? netstat?)
2016/05/09 面试题
领导干部对照检查材料
2014/08/24 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
自荐信大全
2019/03/21 职场文书
Python爬虫之爬取二手房信息
2021/04/27 Python
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js
MySQL时区造成时差问题
2022/04/13 MySQL
德生2P3收音机开箱评测
2022/04/30 无线电