基于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 前的按键判断代码
Mar 19 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
Mar 01 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
vue页面更新patch的实现示例
Mar 25 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
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中目录,文件操作详谈
2007/03/19 PHP
PHP中常用的转义函数
2014/02/28 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
php封装的mysqli类完整实例
2016/10/18 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript定时器完整实例
2015/02/10 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
ES6学习之变量的解构赋值
2017/02/12 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
javascript使用正则表达式实现注册登入校验
2020/09/23 Javascript
[54:56]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第三局
2016/03/06 DOTA
Python之eval()函数危险性浅析
2014/07/03 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
python实现多线程抓取知乎用户
2016/12/12 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
python对html过滤处理的方法
2018/10/21 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
python中get和post有什么区别
2020/06/19 Python
python opencv实现图像配准与比较
2021/02/09 Python
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
致百米运动员广播稿
2014/01/29 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
文艺演出主持词
2015/07/01 职场文书
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript
vue实现滑动解锁功能
2022/03/03 Vue.js
Fluentd搭建日志收集服务
2022/09/23 Servers