基于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系列之数值计算
Jun 07 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js使下拉列表框可编辑不止是选择
Dec 12 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
Nov 29 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
vue从零实现一个消息通知组件的方法详解
Mar 16 Javascript
Vue实现浏览器打印功能的代码
Apr 17 Javascript
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 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
全国FM电台频率大全 - 8 黑龙江省
2020/03/11 无线电
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
setAttribute 与 class冲突解决
2008/02/17 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
Nodejs实现的一个静态服务器实例
2014/12/06 NodeJs
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
2017/05/05 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
webpack打包node.js后端项目的方法
2018/03/10 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
浅谈numpy库的常用基本操作方法
2018/01/09 Python
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
Pipenv一键搭建python虚拟环境的方法
2018/05/22 Python
对python mayavi三维绘图的实现详解
2019/01/08 Python
Python学习笔记之自定义函数用法详解
2019/06/08 Python
django多种支付、并发订单处理实例代码
2019/12/13 Python
Django如何实现密码错误报错提醒
2020/09/04 Python
一个入门级python爬虫教程详解
2021/01/27 Python
布鲁明戴尔百货店:Bloomingdale’s
2016/12/21 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
联想韩国官网:Lenovo Korea
2018/05/10 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
2014年应届大学生自我评价
2014/01/09 职场文书
学校文明单位申报材料
2014/05/06 职场文书
公司放假通知怎么写
2015/04/15 职场文书
初中班主任教育随笔
2015/08/15 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
JavaScript中的LHS和RHS分析详情
2022/04/06 Javascript