使用JavaScript实现旋转的彩圈特效


Posted in Javascript onJune 23, 2015

使用JavaScript写的一个旋转的彩圈

效果图

使用JavaScript实现旋转的彩圈特效

<!DOCTYPE html>
<html>
<head>
<script src="/jquery-1.11.3.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>

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
jQuery编写widget的一些技巧分享
Oct 28 Javascript
jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码
Jan 23 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
JavaScript用document.write()输出换行的示例代码
Nov 26 Javascript
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
在Node.js中使用HTTP上传文件的方法
Jun 23 #Javascript
Js+php实现异步拖拽上传文件
Jun 23 #Javascript
javascript框架设计之类工厂
Jun 23 #Javascript
jQuery判断多个input file 都不能为空的例子
Jun 23 #Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 #Javascript
简述AngularJS相关的一些编程思想
Jun 23 #Javascript
javascript框架设计之种子模块
Jun 23 #Javascript
You might like
PHP实现多服务器session共享之NFS共享的方法
2007/03/16 PHP
深入解析php中的foreach函数
2013/08/31 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
nodejs npm package.json中文文档
2014/09/04 NodeJs
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
利用ES6语法重构React组件详解
2017/03/02 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
Vue调试神器vue-devtools安装方法
2017/12/12 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
python中pygame模块用法实例
2014/10/09 Python
粗略分析Python中的内存泄漏
2015/04/23 Python
python做量化投资系列之比特币初始配置
2018/01/23 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
解决python 自动安装缺少模块的问题
2018/10/22 Python
Python中shapefile转换geojson的示例
2019/01/03 Python
Python Scrapy框架第一个入门程序示例
2020/02/05 Python
python pprint模块中print()和pprint()两者的区别
2020/02/10 Python
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
PHP笔试题
2012/02/22 面试题
法制宣传日活动总结
2014/04/29 职场文书
质量标语大全
2014/06/12 职场文书
优秀本科毕业生自荐信
2014/07/04 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
党的群众路线教育实践活动查摆问题自查报告
2014/10/10 职场文书
“5.12”护士节主持词
2015/07/04 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书
Python编程中Python与GIL互斥锁关系作用分析
2021/09/15 Python