基于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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
IE8 原生JSON支持
Apr 13 Javascript
两个select之间option的互相添加操作(jquery实现)
Nov 12 Javascript
JavaScript实现文字与图片拖拽效果的方法
Feb 16 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
Bootstrap精简教程
Nov 27 Javascript
jquery+ajax实现直接提交表单实例分析
Jun 17 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
vue2实现provide inject传递响应式
May 21 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
《破坏领主》销量已超100万 未来将继续开发新内容
2020/03/08 其他游戏
PHP脚本中include文件出错解决方法
2008/11/20 PHP
网站用php实现paypal整合方法
2010/11/28 PHP
PHP中的闭包(匿名函数)浅析
2015/02/07 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
Node.js的项目构建工具Grunt的安装与配置教程
2016/05/12 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
2017/02/08 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
Node.js利用断言模块assert进行单元测试的方法
2017/09/28 Javascript
Vue cli+mui 区域滚动的实例代码
2018/01/25 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
React学习笔记之高阶组件应用
2018/06/02 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
element-ui组件table实现自定义筛选功能的示例代码
2019/03/15 Javascript
layui table 获取分页 limit的方法
2019/09/20 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
vue中实现点击空白区域关闭弹窗的两种方法
2020/12/30 Vue.js
Python中MYSQLdb出现乱码的解决方法
2014/10/11 Python
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
浅谈pandas用groupby后对层级索引levels的处理方法
2018/11/06 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
计算s=f(f(-1.4))的值
2014/05/06 面试题
外贸采购员求职的自我评价
2013/11/26 职场文书
2014年五一活动策划方案
2014/03/15 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
先进工作者申报材料
2014/12/23 职场文书
求职自荐信范文(优秀篇)
2015/03/27 职场文书
mysql死锁和分库分表问题详解
2021/04/16 MySQL