JS实现太极旋转思路分析

 更新时间:2016年12月09日 08:39:12   作者:梁小涛  
本文主要对JS实现太极旋转的思路进行分析,步骤清晰,简短的文字,深入的理解。需要的朋友可以看下

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

思路:

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

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

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

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

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

相关文章

  • 微信小程序学习总结(一)项目创建与目录结构分析

    微信小程序学习总结(一)项目创建与目录结构分析

    这篇文章主要介绍了微信小程序学习总结(一)项目创建与目录结构,总结分析了微信小程序项目创建、配置方法以及目录结构、文件功能,需要的朋友可以参考下
    2020-06-06
  • js中Array对象的常用遍历方法详解

    js中Array对象的常用遍历方法详解

    今天小编就为大家分享一篇关于js中Array对象的常用遍历方法详解,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • 原生js实现公告滚动效果

    原生js实现公告滚动效果

    这篇文章主要为大家详细介绍了原生js实现公告滚动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • BootStrap Tooltip插件源码解析

    BootStrap Tooltip插件源码解析

    这篇文章主要为大家详细解析了BootStrap的Tooltip插件源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12
  • js bind 函数 使用闭包保存执行上下文

    js bind 函数 使用闭包保存执行上下文

    在javascript中,函数总是在一个特殊的上下文执行(称为执行上下文),如果你将一个对象的函数赋值给另外一个变量的话,这个函数的执行上下文就变为这个变量的上下文了。下面的一个例子能很好的说明这个问题
    2011-12-12
  • JS获取url参数、主域名的方法实例分析

    JS获取url参数、主域名的方法实例分析

    这篇文章主要介绍了JS获取url参数、主域名的方法,结合实例形式分析了javascript针对主机域名、端口、路径名、URL参数等的相关操作技巧,需要的朋友可以参考下
    2016-08-08
  • js之完全兼容ie与firefox的拖动层代码[测试好用]

    js之完全兼容ie与firefox的拖动层代码[测试好用]

    经测试,这个拖到效果不错,多浏览器支持。方便做网站的朋友使用
    2008-10-10
  • Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单

    Bootstrap每天必学之级联下拉菜单,主要应用场合有省市级关联菜单等,感兴趣的小伙伴们可以参考一下
    2016-03-03
  • js精准计算

    js精准计算

    这篇文章主要介绍了js精准计算,对此感兴趣的同学,可以实验一下
    2021-04-04
  • 分享JS数组求和与求最大值的方法

    分享JS数组求和与求最大值的方法

    数组求和在项目需求中还是挺常见的,比如购物车金额统计、人员的前台统计等等。今天小编先是给大家分享了JS数组求和的两个方法,而后又用实例演示js数组求和,并求出数组中的最大值,一起来看看吧。
    2016-08-08

最新评论