基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈實(shí)例
更新時(shí)間：2015年06月26日 09:27:43 作者：wif
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的旋轉(zhuǎn)彩圈,涉及jQuery定時(shí)操作頁(yè)面元素的相關(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)行效果圖如下：
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效
- jQuery+CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)效果
- jQuery平滑旋轉(zhuǎn)幻燈片特效代碼分享
- jquery實(shí)現(xiàn)的3D旋轉(zhuǎn)木馬特效代碼分享
- jQuery右下角旋轉(zhuǎn)環(huán)狀菜單特效代碼
- jQuery div拖拽用法實(shí)例
- 基于jQuery實(shí)現(xiàn)拖拽圖標(biāo)到回收站并刪除功能
- jquery利用拖拽方式在圖片上添加熱鏈接
- jQuery實(shí)現(xiàn)html元素拖拽
- jQuery拖拽插件gridster使用指南
- jQuery實(shí)現(xiàn)拖拽效果插件的方法
- jquery實(shí)現(xiàn)可旋轉(zhuǎn)可拖拽的文字效果代碼
相關(guān)文章
jquery實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖特效
這篇文章主要介紹了jquery實(shí)現(xiàn)移動(dòng)端點(diǎn)擊圖片查看大圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2015-11-11
jQuery Selectors(選擇器)的使用(四-五、內(nèi)容篇&可見(jiàn)性篇)
本系列文章主要講述jQuery框架的選擇器(Selectors)使用方法，我將以實(shí)例方式進(jìn)行講述，以簡(jiǎn)單，全面為基礎(chǔ)，不會(huì)涉及很深，我的學(xué)習(xí)方法：先入門(mén)，后進(jìn)階！2009-12-12
JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)
下面小編就為大家?guī)?lái)一篇JQuery 獲取多個(gè)select標(biāo)簽option的text內(nèi)容(實(shí)例)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能
這篇文章主要介紹了jQuery使用hide()、toggle()函數(shù)實(shí)現(xiàn)相機(jī)品牌展示隱藏功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了jquery控制頁(yè)面部分刷新的方法,涉及jQuery中l(wèi)oad方法的使用技巧,需要的朋友可以參考下2015-06-06
3kb jQuery代碼搞定各種樹(shù)形選擇的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇3kb jQuery代碼搞定各種樹(shù)形選擇的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
在網(wǎng)站開(kāi)發(fā)中我們經(jīng)常需要將對(duì)話框顯示在屏幕的中央。如果使用Javascript因?yàn)闉g覽器實(shí)現(xiàn)的差異，實(shí)現(xiàn)起來(lái)非常麻煩。但是JQuery可以很簡(jiǎn)單實(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)步驟
今天項(xiàng)目中加了一個(gè)上傳文件的需求,我就搞了一下,下面這篇文章主要給大家介紹了關(guān)于jquery?ajax實(shí)現(xiàn)文件上傳提交的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
一般情況下使用第二種方法是可以的，但是遇到表格行可以拖拽的情況，那么就會(huì)出現(xiàn)BUG了，這個(gè)自行測(cè)試就知道了。2011-06-06