使用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 相关文章推荐
js同时按下两个方向键
Dec 01 Javascript
Mootools 1.2教程 事件处理
Sep 15 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 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数据库开发知多少
2006/10/09 PHP
php无序树实现方法
2015/07/28 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php及codeigniter使用session-cookie的方法(详解)
2017/04/06 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
分析 JavaScript 中令人困惑的变量赋值
2007/08/13 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
AngularJS ng-change 指令的详解及简单实例
2016/07/30 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
2017/01/05 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
初学node.js中实现删除用户路由
2019/05/27 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
解决python xlrd无法读取excel文件的问题
2018/12/25 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
世界最大的票务市场:viagogo
2017/02/16 全球购物
土木建筑学生自我评价
2014/01/14 职场文书
个人收入证明范本
2014/09/18 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
会议欢迎词范文
2015/01/27 职场文书
工程项目经理岗位职责
2015/02/02 职场文书
2015年计划生育责任书
2015/05/08 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS