快捷導(dǎo)航

基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈實(shí)例

更新時間：2015年06月26日 09:27:43 作者：wif

這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈,涉及jQuery定時操作頁面元素的相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.7.1.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">旋轉(zhuǎn)的圈</p>
<div id="div1"></div>
</body>
</html>

運(yùn)行效果圖如下：

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效
這篇文章主要介紹了jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-11-11
jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡單，全面為基礎(chǔ)，不會涉及很深，我的學(xué)習(xí)方法：先入門，后進(jìn)階！
2009-12-12
JQuery 獲取多個select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)硪黄狫Query 獲取多個select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能
這篇文章主要介紹了jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2021-01-01
jquery控制頁面部分刷新的方法
這篇文章主要介紹了jquery控制頁面部分刷新的方法,涉及jQuery中l(wèi)oad方法的使用技巧,需要的朋友可以參考下
2015-06-06
3kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄?kb jQuery代碼搞定各種樹形選擇的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JQuery 將元素顯示在屏幕的中央的代碼
在網(wǎng)站開發(fā)中我們經(jīng)常需要將對話框顯示在屏幕的中央。如果使用Javascript因?yàn)闉g覽器實(shí)現(xiàn)的差異，實(shí)現(xiàn)起來非常麻煩。但是JQuery可以很簡單實(shí)現(xiàn)的搞定這一切。
2010-02-02
jQuery學(xué)習(xí)筆記之jQuery的DOM操作
jQuery學(xué)習(xí)筆記之jQuery的DOM操作實(shí)現(xiàn)方法，學(xué)習(xí)jquery與dom操作的朋友可以參考下。
2010-12-12
jquery?ajax實(shí)現(xiàn)文件上傳提交的實(shí)戰(zhàn)步驟
今天項目中加了一個上傳文件的需求,我就搞了一下,下面這篇文章主要給大家介紹了關(guān)于jquery?ajax實(shí)現(xiàn)文件上傳提交的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
jQuery表格行換色的三種實(shí)現(xiàn)方法
一般情況下使用第二種方法是可以的，但是遇到表格行可以拖拽的情況，那么就會出現(xiàn)BUG了，這個自行測試就知道了。
2011-06-06