快捷導(dǎo)航

使用JavaScript實(shí)現(xiàn)旋轉(zhuǎn)的彩圈特效

更新時(shí)間：2015年06月23日 10:54:54 投稿：hebedich

這篇文章主要介紹了使用JavaScript實(shí)現(xiàn)旋轉(zhuǎn)的彩圈特效的相關(guān)資料,需要的朋友可以參考下

使用JavaScript寫(xiě)的一個(gè)旋轉(zhuǎn)的彩圈

效果圖

<!DOCTYPE html>
<html>
<head>
<script src="/jquery-1.11.3.min.js"></script>
<script>
for(var i=0;i<100000;i++)
{
if(i%4==0)
setTimeout("$('#div1').css({'border-left':'40px solid red','border-bottom':'40px solid green','border-right':'40px solid yellow','border-top':'40px solid blue'})",2000*i);
if(i%4==1)
setTimeout("$('#div1').css({'border-left':'40px solid blue','border-bottom':'40px solid red','border-right':'40px solid green','border-top':'40px solid yellow'})",2000*i);
if(i%4==2)
setTimeout("$('#div1').css({'border-left':'40px solid yellow','border-bottom':'40px solid blue','border-right':'40px solid red','border-top':'40px solid green'})",2000*i);
if(i%4==3)
setTimeout("$('#div1').css({'border-left':'40px solid green','border-bottom':'40px solid yellow','border-right':'40px solid blue','border-top':'40px solid red'})",2000*i);
}
 
</script>
<style>
 
#div2{
width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:900px/900px;
  display:none;
  top:0px;
  left:0px;
  position:relative;
  z-index:1;
}
#div1{
  width: 100px;
  height: 100px;
   border-left: 40px solid red;
  border-right: 40px solid yellow;
  border-bottom: 40px solid green;
  border-top:40px solid blue;
  background-color:#FFFFFF;
  border-radius:90px/90px;
}
</style>
</head>
 
<body>
<p style="color:#FF0000">Ðý×ªµÄÈ¦</p>
<div id="div1"></div>
</body>
</html>

以上所述就是本文的全部?jī)?nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

一文徹底搞懂JavaScrip中的call、apply、arguments
在學(xué)習(xí)JavaScript時(shí),你可能會(huì)遇到call、arguments和apply這三個(gè)方法,這篇文章主要介紹了關(guān)于JavaScrip中的call、apply、arguments的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-04-04
前端用echarts繪制含有多個(gè)分層的波形圖關(guān)鍵代碼
每次實(shí)現(xiàn)各種圖表時(shí),總會(huì)用到echarts,不得不說(shuō)確實(shí)是一個(gè)非常好用的開(kāi)源庫(kù),這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個(gè)分層的波形圖的相關(guān)資料,需要的朋友可以參考下
2024-03-03
JS removeAttribute()方法實(shí)現(xiàn)刪除元素的某個(gè)屬性
這篇文章主要介紹了JS removeAttribute()方法實(shí)現(xiàn)刪除元素的某個(gè)屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
理解 JavaScript EventEmitter
本文是筆者看了eventemitter3 和 Node.js 事件模塊源碼后實(shí)現(xiàn)的 EventEmitter 。JavaScript 事件很重要，希望看了這篇文章的你們能有所收獲
2018-03-03
再談javascript注入黑客必備！
這篇文章主要為大家詳細(xì)介紹了js注入，黑客之路必備！本文告訴大家js注入是什么，js注入攻防如何進(jìn)行，感興趣的小伙伴們可以參考一下
2016-09-09
javascript 繼承實(shí)現(xiàn)方法
javascript的繼承機(jī)制并不是明確規(guī)定的,而是通過(guò)模仿實(shí)現(xiàn)的,意味著繼承不是由解釋程序處理,開(kāi)發(fā)者有權(quán)決定最適合的繼承方式.
2009-08-08
JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法
這篇文章主要介紹了JavaScript給按鈕綁定點(diǎn)擊事件（onclick）的方法,涉及javascript綁定onclick的基本技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-04-04
BootStrap中Datepicker控件帶中文的js文件
bootstrap-datepicker 是一個(gè)非常優(yōu)秀的時(shí)間選擇插件。這篇文章主要介紹了bootstrap-datepicker帶中文的js文件的相關(guān)資料,需要的朋友可以參考下
2016-08-08
JavaScript 點(diǎn)擊頁(yè)面上的按紐，彈出層，背景變灰
點(diǎn)擊頁(yè)面上的按紐，彈出一個(gè)層，背景變灰，這樣的效果現(xiàn)在網(wǎng)頁(yè)應(yīng)用的比較多，這里只是個(gè)簡(jiǎn)單的實(shí)現(xiàn)方式
2010-06-06
javascript與css3動(dòng)畫(huà)結(jié)合使用小結(jié)
本文給大家講述的是如何使用javascript結(jié)合CSS動(dòng)畫(huà)來(lái)實(shí)現(xiàn)一些占用資源更少，更優(yōu)化的動(dòng)畫(huà)效果，思路十分巧妙，這里推薦給小伙伴們參考下。
2015-03-03