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 相关文章推荐
让Firefox支持event对象实现代码
Nov 07 Javascript
定时器(setTimeout/setInterval)调用带参函数失效解决方法
Mar 26 Javascript
jQuery取得select选择的文本与值的示例
Dec 09 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
React Native使用Modal自定义分享界面的示例代码
Oct 31 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
原生js实现商品筛选功能
Oct 28 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
thinkphp控制器调度使用示例
2014/02/24 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
ThinkPHP5.0框架结合Swoole开发实现WebSocket在线聊天案例详解
2019/04/02 PHP
用tip解决Ext列宽度不够的问题
2008/12/13 Javascript
扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁
2011/12/08 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
node.js中的buffer.write方法使用说明
2014/12/10 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
javascript实现连续赋值
2015/08/10 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
three.js 入门案例详解
2018/01/23 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
[01:03:36]DOTA2-DPC中国联赛 正赛 VG vs Magma BO3 第二场 1月26日
2021/03/11 DOTA
Windows下安装python2.7及科学计算套装
2015/03/05 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
介绍java中初始化块的使用
2012/09/11 面试题
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
2014年党课学习材料
2014/05/11 职场文书
消防标语大全
2014/06/07 职场文书
工作经验交流材料
2014/12/30 职场文书
给老婆的检讨书
2015/01/27 职场文书
2015年保送生自荐信
2015/03/24 职场文书
涨价通知
2015/04/23 职场文书
排球赛新闻稿
2015/07/17 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
2017年寒假少先队活动总结
2016/04/06 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript