基于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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
使用户点击后退按钮使效三行代码
Jul 07 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
ES6新特性一: let和const命令详解
Apr 20 Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
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
PHP中PDO的错误处理
2011/09/04 PHP
php检测文本的编码
2015/07/26 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
jQuery简单获取DIV和A标签元素位置的方法
2017/02/07 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
js使用ajax传值给后台,后台返回字符串处理方法
2018/08/08 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python实现下载指定网址所有图片的方法
2015/08/08 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python实现字符串和字典的转换
2018/09/29 Python
Python简单获取二维数组行列数的方法示例
2018/12/21 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Pytorch之保存读取模型实例
2019/12/30 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
美国最受欢迎的童装品牌之一:The Children’s Place
2016/07/23 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
iostream与iostream.h的区别
2015/01/16 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
化学教师教学反思
2014/01/17 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
超市促销活动方案
2014/03/05 职场文书
小学班主任事迹材料
2014/12/17 职场文书
六一领导慰问欢迎词
2015/01/26 职场文书
大学军训决心书
2015/02/05 职场文书
毕业论文指导老师意见
2015/06/04 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
一级电子管军用接收机测评
2022/04/05 无线电
keepalived + nginx 实现高可用方案
2022/12/24 Servers