基于jQuery实现的旋转彩圈实例
更新时间：2015年06月26日 09:27:43 作者：wif
这篇文章主要介绍了基于jQuery实现的旋转彩圈,涉及jQuery定时操作页面元素的相关技巧,需要的朋友可以参考下
本文实例讲述了基于jQuery实现的旋转彩圈。分享给大家供大家参考。具体实现方法如下：
<!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">旋转的圈</p>
<div id="div1"></div>
</body>
</html>
运行效果图如下：
希望本文所述对大家的jQuery程序设计有所帮助。
相关文章
这篇文章主要介绍了jquery实现移动端点击图片查看大图特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
jQuery Selectors(选择器)的使用(四-五、内容篇&可见性篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！2009-12-12
JQuery 获取多个select标签option的text内容(实例)
下面小编就为大家带来一篇JQuery 获取多个select标签option的text内容(实例)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
这篇文章主要介绍了jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
这篇文章主要介绍了jquery控制页面部分刷新的方法,涉及jQuery中load方法的使用技巧,需要的朋友可以参考下2015-06-06
下面小编就为大家带来一篇3kb jQuery代码搞定各种树形选择的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
在网站开发中我们经常需要将对话框显示在屏幕的中央。如果使用Javascript因为浏览器实现的差异，实现起来非常麻烦。但是JQuery可以很简单实现的搞定这一切。2010-02-02
jQuery学习笔记之jQuery的DOM操作实现方法， 学习jquery与dom操作的朋友可以参考下。2010-12-12
今天项目中加了一个上传文件的需求,我就搞了一下,下面这篇文章主要给大家介绍了关于jquery ajax实现文件上传提交的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
一般情况下使用第二种方法是可以的，但是遇到表格行可以拖拽的情况，那么就会出现BUG了，这个自行测试就知道了。2011-06-06
最新评论