基于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 相关文章推荐
window.location.hash 属性使用说明
Mar 20 Javascript
JQuery 图片滚动轮播示例代码
Mar 24 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
jQuery实现HTML表格单元格的合并功能
Apr 06 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
Javascript自定义事件详解
Jan 13 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
jQuery实现动态加载select下拉列表项功能示例
May 31 jQuery
前端深入理解Typescript泛型概念
Mar 09 Javascript
js函数柯里化的方法和作用实例分析
Apr 11 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
Nov 04 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
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
通过缓存数据库结果提高PHP性能的原理介绍
2012/09/05 PHP
Yii2 输出xml格式数据的方法
2016/05/03 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
PHP实现上传多图即时显示与即时删除的方法
2017/05/09 PHP
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
js实现下一页页码效果
2017/03/07 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
JS实现水平移动与垂直移动动画
2019/12/19 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JS可断点续传文件上传实现代码解析
2020/07/30 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
Python函数式编程指南(一):函数式编程概述
2015/06/24 Python
Python 私有函数的实例详解
2017/09/11 Python
python实现简单遗传算法
2018/03/19 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python Flask上下文管理机制实例解析
2020/03/16 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
大学生党员自我评价范文
2014/04/09 职场文书
中班幼儿评语大全
2014/04/30 职场文书
意外伤害赔偿协议书
2014/09/16 职场文书
自我评价优缺点范文
2015/03/11 职场文书
上甘岭观后感
2015/06/10 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis