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 23 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
Apr 13 Javascript
ajax 缓存 问题 requestheader
Aug 01 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
浅谈Vue.nextTick 的实现方法
Oct 25 Javascript
详解如何使用node.js的开发框架express创建一个web应用
Dec 20 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
vue生命周期的探索
Apr 03 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
vue自动添加浏览器兼容前后缀操作
Aug 13 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
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
PHP中strlen()和mb_strlen()的区别浅析
2014/06/19 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
让你的网站可编辑的实现js代码
2009/10/19 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
让网页跳转到指定位置的jquery代码非书签
2013/09/06 Javascript
设为首页和收藏的Javascript代码(亲测兼容IE,Firefox,chrome等浏览器)
2013/11/18 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
js防止DIV布局滚动时闪动的解决方法
2014/10/30 Javascript
JS获取浏览器语言动态加载JS文件示例代码
2014/10/31 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
使用flow来规范javascript的变量类型
2019/09/12 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
vue自定义标签和单页面多路由的实现代码
2020/05/03 Javascript
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
详细探究Python中的字典容器
2015/04/14 Python
Python面向对象实现一个对象调用另一个对象操作示例
2019/04/08 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
python文字转语音实现过程解析
2019/11/12 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
销售部主管岗位职责
2013/12/18 职场文书
新学期班主任寄语
2014/01/18 职场文书
房地产财务部员工岗位职责
2014/03/12 职场文书
法制宣传日活动总结
2014/04/29 职场文书
火锅店的活动方案
2014/08/15 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
酒店厨房管理制度
2015/08/06 职场文书
又涨知识了,自律到底多重要?
2019/06/27 职场文书