源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS实现太极旋转思路分析

  • 时间:2020-09-07 12:05 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS实现太极旋转思路分析
[img]http://files.jb51.net/file_images/article/201612/201612090833481.png[/img] 刚学了js的一些函数,所以做了一个太极的旋转。做完之后是上面这个样子的,是可以旋转的。 [b]思路:[/b] [b]1.先做一个基准转盘,之后将元素都放在转盘上,跟随转盘动。[/b] [img]http://files.jb51.net/file_images/article/201612/201612090833482.png[/img] [b]2.画两个半圆,主要属性是border-top-right-radius: 250px; 像素值为长边的一半。[/b] [img]http://files.jb51.net/file_images/article/201612/201612090833483.png[/img] [b]3.然后画4个圆,以基准转盘为父元素,按照下面黑色圆一样的思路再画另外一边白色的圆,最后再在两个中等的圆上画两个小圆。[/b] [img]http://files.jb51.net/file_images/article/201612/201612090833484.png[/img] [b]4.设置定时器:[/b]
//旋转角度
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);
[b]5.小结:就是简单的CSS叠加出来的效果。[/b] 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部