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