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

  这篇文章主要介绍了使用JavaScript实现旋转的彩圈特效的相关资料,需要的朋友可以参考下

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

  效果图

?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

<!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>

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

 

时间: 2024-12-21 21:00:01

使用JavaScript实现旋转的彩圈特效的相关文章

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

基于jQuery实现的旋转彩圈实例

  本文实例讲述了基于jQuery实现的旋转彩圈.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html> <html> <head> <script src=&qu

JavaScript + CSS3 实现的海报画廊特效

原文:JavaScript + CSS3 实现的海报画廊特效 这是慕课网上<CSS3+JS 实现超炫的散列画廊特效>的源代码,我修改了一些 bug 和调优了一些细节,并把学习过程中并不了解的知识点以及一些基本思路用注释写在了源码里供以后查阅,同时欢迎指正其中的问题. 源课程视频地址:http://www.imooc.com/learn/366 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

JavaScript实战(原生range和自定义特效)简单实例_javascript技巧

今天我又码了两个特效:一个是用原生input[type=range]的,另一个完全自定义的:下面是完整代码和演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> #tip{ position: absolute; top: 30px; left: 0; ri

javascript实现tab响应式切换特效_javascript技巧

本文实例讲解了tab响应式切换效果,利用js对样式进行动态切换即可. 多的不说,请看代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0,

JavaScript实现垂直向上无缝滚动特效代码_javascript技巧

一.循环向上滚动的文字,如上面的滚动效果 二.实现的思路 1.建立三个层dome.dome1.dome2 2.垂直滚动的文字在dome1上 3.通过层的滚动来实现文字滚动 三.源代码 <html> <head> <title>循环向上滚动的文字</title> <link href="css/scrollTop.css" rel="stylesheet" type="text/css" /&g

javascript椭圆旋转相册实现代码_图象特效

功能说明: 1.支持自动和手动两种模式:自动模式下自动旋转展示,手动模式下通过鼠标选择当前图片,或通过提供的接口选择上一张/下一张图片. 2.可自行添加旋转的缓动模式,默认模式为:匀速,先快后慢,先慢后快. 3.可自定义旋转轨迹的宽和高. 4.支持IE6 7 8 9 10 firefox chrome等浏览器. 效果预览: 实现原理: 根据对图片在椭圆轨迹上的运动,动态改变缩放大小,实现立体的视觉效果. 代码分析: 复制代码 代码如下: init:function(id,options){ va

javascript网页制作中表单相关特效整理

javascript|特效|网页 只能是一些限定的东西 ENTER键可以让光标移到下一个输入框 <input > 只能是中文<input onkeyup="value=value.replace(/[ -~]/g,'')" > 屏蔽输入法<input style="ime-mode:disabled" > 只能输入英文和数字<input onkeyup="value=value.replace(/[\W]/g,''

用Javascript制作旋转导航菜单

你见过这样的导航菜单吗?导航菜单围绕着网站Logo不停地旋转,而一旦你把鼠标移到菜单上,旋转立即停止,在显示网站logo的地方显示出这个菜单链接的内容简介,点击链接将链接到指定的网页.一旦你的鼠标离开菜单,导航菜单又继续不停地旋转.你看这种导航菜单是不是既吸引人又贴近用户.本文例子如下图所示.是不是想在自已的网页上也放上一个,其实制作起来也不太难. 制作思路:要使页面的内容旋转起来,用图层和Javascript程序是肯定的了,要使图层的运动轨迹是一个圆,这要用到圆的参数方程,这是一个数学问题,不