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 相关文章推荐
关于this和self的使用说明
Aug 01 Javascript
jquery制作图片时钟特效
Mar 30 Javascript
jQuery插件Validate实现自定义校验结果样式
Jan 18 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
jQuery实现简单的抽奖游戏
May 05 jQuery
js自定义trim函数实现删除两端空格功能
Feb 09 Javascript
node实现的爬虫功能示例
May 04 Javascript
vue路由--网站导航功能详解
Mar 29 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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设计模式之单例模式使用示例
2014/01/20 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
调试php程序的简单步骤
2019/10/04 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
Bootstrap树形组件jqTree的简单封装
2016/01/25 Javascript
javascript求日期差的方法
2016/03/02 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
2016/08/23 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
layui 富文本编辑器和textarea值的相互传递方法
2019/09/18 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
简单实现python画圆功能
2018/01/25 Python
Python 实现异步调用函数的示例讲解
2018/10/14 Python
Python如何调用外部系统命令
2019/08/07 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
结合 CSS3 transition transform 实现简单的跑马灯效果的示例
2018/02/07 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
美国领先的个性化礼品商城:Personalization Mall
2019/07/27 全球购物
个性大学生自我评价
2013/12/04 职场文书
销售经理工作职责
2014/02/03 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
使用Oracle跟踪文件的问题详解
2021/06/28 Oracle
Mysql中有关Datetime和Timestamp的使用总结
2021/12/06 MySQL
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技