编程 Javascript

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

Posted in Javascript onJune 23, 2015

使用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实现旋转的彩圈特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery UI DatePicker中z-index默认为1的解决办法

Sep 28 Javascript

将Datatable转化成json发送前台实现思路

Sep 06 Javascript

JavaScript实现维吉尼亚(Vigenere)密码算法实例

Nov 22 Javascript

解析JavaScript中instanceof对于不同的构造器或许都返回true

Dec 03 Javascript

js继承call()和apply()方法总结

Dec 08 Javascript

JS实现的论坛Ajax打分效果完整实例

Oct 31 Javascript

jquery显示隐藏元素的实现代码

May 19 Javascript

Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

Jan 19 Javascript

详解angular中的作用域及继承

May 31 Javascript

AngularJS实现的获取焦点及失去焦点时的表单验证功能示例

Oct 25 Javascript

浅谈高大上的微信小程序中渲染html内容—技术分享

Oct 25 Javascript

element tree树形组件回显数据问题解决

Aug 14 Javascript

在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