JS實(shí)現(xiàn)太極旋轉(zhuǎn)思路分析
更新時(shí)間：2016年12月09日 08:39:12 作者：梁小濤
本文主要對(duì)JS實(shí)現(xiàn)太極旋轉(zhuǎn)的思路進(jìn)行分析，步驟清晰，簡(jiǎn)短的文字，深入的理解。需要的朋友可以看下
剛學(xué)了js的一些函數(shù)，所以做了一個(gè)太極的旋轉(zhuǎn)。做完之后是上面這個(gè)樣子的，是可以旋轉(zhuǎn)的。
思路：
1.先做一個(gè)基準(zhǔn)轉(zhuǎn)盤，之后將元素都放在轉(zhuǎn)盤上，跟隨轉(zhuǎn)盤動(dòng)。
2.畫兩個(gè)半圓，主要屬性是border-top-right-radius: 250px; 像素值為長(zhǎng)邊的一半。
3.然后畫4個(gè)圓，以基準(zhǔn)轉(zhuǎn)盤為父元素，按照下面黑色圓一樣的思路再畫另外一邊白色的圓，最后再在兩個(gè)中等的圓上畫兩個(gè)小圓。
4.設(shè)置定時(shí)器：
//旋轉(zhuǎn)角度
var deg = 0
//設(shè)置定時(shí)器，100毫秒動(dòng)一次
var tid = setInterval(function(){
var clock_dfc = document.getElementById("clock-dfc");
clock_dfc.style.transform = "rotate("+(-deg)+"deg)"; //改變轉(zhuǎn)盤屬性
deg -=30;//每次賺30度
},100);
5.小結(jié)：就是簡(jiǎn)單的CSS疊加出來的效果。
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
TypeScript?是一種靜態(tài)類型的編程語言,它可以讓我們?cè)诰帉?JavaScript?代碼時(shí),提前發(fā)現(xiàn)并避免一些潛在的錯(cuò)誤,本文主要為大家介紹了TypeScript中never類型的妙用,感興趣的可以了解下2023-11-11
JavaScript處理XML DOM、XPath和XSLT方法詳解
這篇文章介紹了JavaScript處理XML DOM、XPath和XSLT的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
js遍歷對(duì)象key和value實(shí)戰(zhàn)舉例
這篇文章主要給大家介紹了關(guān)于js遍歷對(duì)象key和value的相關(guān)資料,隨著JavaScript在web應(yīng)用程序中的廣泛使用,遍歷對(duì)象的key和value成為了編寫復(fù)雜代碼所必需的技能,需要的朋友可以參考下2023-07-07
Javascript實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)簡(jiǎn)易導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
webpack前端應(yīng)用之基礎(chǔ)打包實(shí)現(xiàn)
本文主要介紹了webpack前端應(yīng)用之基礎(chǔ)打包實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要介紹了JavaScript中的時(shí)間處理小結(jié)的相關(guān)資料,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了原生js如何實(shí)現(xiàn)表單驗(yàn)證功能，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-02-02
js實(shí)現(xiàn)div色塊拖動(dòng)錄制
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)div色塊拖動(dòng)錄制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-01-01
Javascript實(shí)現(xiàn)簡(jiǎn)易天數(shù)計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)簡(jiǎn)易天數(shù)計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
JavaScript實(shí)現(xiàn)樓梯滾動(dòng)特效(jQuery實(shí)現(xiàn))
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)樓梯滾動(dòng)特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09