基于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 时间比较实现代码
Oct 28 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
document.getElementById介绍
Sep 13 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
Dec 30 Javascript
ThinkPHP+jquery实现“加载更多”功能代码
Mar 11 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
Feb 26 Javascript
详解express使用vue-router的history踩坑
Jun 05 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP利用MySQL保存session的实现思路及示例代码
2014/09/09 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
网页的标准,IMG不支持onload标签怎么办
2006/06/29 Javascript
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
js读取csv文件并使用json显示出来
2015/01/09 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
2016/04/19 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
vue.js或js实现中文A-Z排序的方法
2018/03/08 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
js实现ATM机存取款功能
2020/10/27 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
JS为什么说async/await是generator的语法糖详解
2019/07/11 Javascript
vue 实现LED数字时钟效果(开箱即用)
2019/12/08 Javascript
JS实现星星海特效
2019/12/24 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
Python MD5文件生成码
2009/01/12 Python
Python进阶篇之字典操作总结
2016/11/16 Python
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python3实现磁盘空间监控
2018/06/21 Python
PyCharm无法识别PyQt5的2种解决方法,ModuleNotFoundError: No module named 'pyqt5'
2020/02/17 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
详解Python中的路径问题
2020/09/02 Python
Python3使用 GitLab API 进行批量合并分支
2020/10/15 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
职工趣味运动会方案
2014/02/10 职场文书
工程项目建议书范文
2014/03/12 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
法定授权委托证明书
2015/06/18 职场文书
团支部组织委员竞选稿
2015/11/21 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
python开发的自动化运维工具ansible详解
2021/08/07 Python