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