使用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>
以上所述就是本文的全部内容了，希望大家能够喜欢。
-
本文向大家介绍基于jQuery实现的旋转彩圈实例，包括了基于jQuery实现的旋转彩圈实例的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了基于jQuery实现的旋转彩圈。分享给大家供大家参考。具体实现方法如下： 运行效果图如下： 希望本文所述对大家的jQuery程序设计有所帮助。
-
本文向大家介绍JavaScript实现旋转轮播图，包括了JavaScript实现旋转轮播图的使用技巧和注意事项，需要的朋友参考一下 最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： 这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮
-
本文向大家介绍JavaScript实现旋转木马轮播图，包括了JavaScript实现旋转木马轮播图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码，供大家参考，具体内容如下 html代码段 图片自己添加，或者使用本人的上传照片，拉到最下面即可看见 css代码段： 初始化 reset js代码段： 这个是封装好的的js代码，直接引用即可
-
本文向大家介绍使用css实现彩虹的效果相关面试题，主要包含被问及使用css实现彩虹的效果时的应答技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍JavaScript图片旋转效果实现方法详解，包括了JavaScript图片旋转效果实现方法详解的使用技巧和注意事项，需要的朋友参考一下 在Canvas API中，上下文CanvasRenderingContext2D对象提供了一个与坐标旋转相关的方法： void rotate(in float angle); // 按给定的弧度顺时针旋转angle rotate（）方法旋转的中心始
-
本文向大家介绍js实现3D旋转效果，包括了js实现3D旋转效果的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现3D旋转效果的具体代码，供大家参考，具体内容如下 实现效果： 实现过程： 步骤一：先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建). 步骤二：给盒子和图片,设置对应的样式 第三步： js
-
本文向大家介绍JavaScript实现彩虹文字效果的方法，包括了JavaScript实现彩虹文字效果的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JavaScript实现彩虹文字效果的方法。分享给大家供大家参考。具体如下： 希望本文所述对大家的javascript程序设计有所帮助。
-
本文向大家介绍基于jQuery实现自动轮播旋转木马特效，包括了基于jQuery实现自动轮播旋转木马特效的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现自动轮播旋转木马特效。分享给大家供大家参考。具体如下： 这是一款基于jQuery实现自动轮播旋转木马特效代码，实现过程很简单。 运行效果图： -------------------查看效果 下载源码----