基于jQuery实现的旋转彩圈实例


Posted in Javascript onJune 26, 2015

本文实例讲述了基于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程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
js控制input输入字符解析
Dec 27 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Angular ui.bootstrap.pagination分页
Jan 20 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
详解angular应用容器化部署
Aug 14 Javascript
vue实现前台列表数据过滤搜索、分页效果
May 28 Javascript
js验证密码强度解析
Mar 18 Javascript
vue实力踩坑之push当前页无效
Apr 10 Vue.js
jquery实现的树形目录实例
Jun 26 #Javascript
arguments对象验证函数的参数是否合法
Jun 26 #Javascript
jquery显示loading图片直到网页加载完成的方法
Jun 25 #Javascript
jquery实现不包含当前项的选择器实例
Jun 25 #Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 #Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
Jun 25 #Javascript
jquery实现带缩略图的全屏图片画廊效果实例
Jun 25 #Javascript
You might like
require(),include(),require_once()和include_once()的异同
2007/01/02 PHP
php二维数组用键名分组相加实例函数
2013/11/06 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
php实现的生成排列算法示例
2019/07/25 PHP
javascript读取xml实现javascript分页
2013/12/13 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
深入了解Node.js中的一些特性
2014/09/25 Javascript
jQuery找出网页上最高元素的方法
2015/03/20 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jquery实现先淡出再折叠收起的动画效果
2015/08/07 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
vue父组件点击触发子组件事件的实例讲解
2018/02/08 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
在vue中给后台接口传的值为数组的格式代码
2020/11/12 Javascript
[05:49]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS 选手采访
2021/03/11 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
使用Python串口实时显示数据并绘图的例子
2019/12/26 Python
python3通过qq邮箱发送邮件以及附件
2020/05/20 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
高三英语教学反思
2014/01/13 职场文书
绘画专业自荐信
2014/07/04 职场文书
村党组织公开承诺书
2015/04/30 职场文书
怎样写观后感
2015/06/19 职场文书
导游词之任弼时故居
2020/01/07 职场文书
浅谈PHP7中的一些小技巧
2021/05/29 PHP