脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 使用JavaScript实现旋转的彩圈特效

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

 更新时间：2015年06月23日 10:54:54   投稿：hebedich  
这篇文章主要介绍了使用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>

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

您可能感兴趣的文章:

相关文章

  • 一文彻底搞懂JavaScrip中的call、apply、arguments

    一文彻底搞懂JavaScrip中的call、apply、arguments

    在学习JavaScript时,你可能会遇到call、arguments和apply这三个方法,这篇文章主要介绍了关于JavaScrip中的call、apply、arguments的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • 前端用echarts绘制含有多个分层的波形图关键代码

    前端用echarts绘制含有多个分层的波形图关键代码

    每次实现各种图表时,总会用到echarts,不得不说确实是一个非常好用的开源库,这篇文章主要给大家介绍了关于前端用echarts绘制含有多个分层的波形图的相关资料,需要的朋友可以参考下
    2024-03-03
  • JS removeAttribute()方法实现删除元素的某个属性

    JS removeAttribute()方法实现删除元素的某个属性

    这篇文章主要介绍了JS removeAttribute()方法实现删除元素的某个属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-01-01
  • 理解 JavaScript EventEmitter

    理解 JavaScript EventEmitter

    本文是笔者看了eventemitter3 和 Node.js 事件模块源码后实现的 EventEmitter 。JavaScript 事件很重要，希望看了这篇文章的你们能有所收获
    2018-03-03
  • 再谈javascript注入 黑客必备！

    再谈javascript注入 黑客必备！

    这篇文章主要为大家详细介绍了js注入，黑客之路必备！本文告诉大家js注入是什么，js注入攻防如何进行，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript 继承实现方法

    javascript 继承实现方法

    javascript的继承机制并不是明确规定的,而是通过模仿实现的,意味着继承不是由解释程序处理,开发者有权决定最适合的继承方式.
    2009-08-08
  • JavaScript给按钮绑定点击事件（onclick）的方法

    JavaScript给按钮绑定点击事件（onclick）的方法

    这篇文章主要介绍了JavaScript给按钮绑定点击事件（onclick）的方法,涉及javascript绑定onclick的基本技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • BootStrap中Datepicker控件带中文的js文件

    BootStrap中Datepicker控件带中文的js文件

    bootstrap-datepicker 是一个非常优秀的时间选择插件。这篇文章主要介绍了bootstrap-datepicker带中文的js文件的相关资料,需要的朋友可以参考下
    2016-08-08
  • JavaScript 点击页面上的按纽，弹出层，背景变灰

    JavaScript 点击页面上的按纽，弹出层，背景变灰

    点击页面上的按纽，弹出一个层，背景变灰，这样的效果现在网页应用的比较多，这里只是个简单的实现方式
    2010-06-06
  • javascript与css3动画结合使用小结

    javascript与css3动画结合使用小结

    本文给大家讲述的是如何使用javascript结合CSS动画来实现一些占用资源更少，更优化的动画效果，思路十分巧妙，这里推荐给小伙伴们参考下。
    2015-03-03

最新评论