javascript实现3D变换的立体圆圈实例

本文实例讲述了javascript实现3D变换的立体圆圈。分享给大家供大家参考。具体如下：

这里使用javascript实现会变换的立体圆圈，在网页3D变化，变色的圆圈特效，网页上的3d圆圈特效。圆圈上的每一点的颜色并不一样，在黑色的网页背景下更能看清楚。

运行效果如下图所示：

具体代码如下：

<html>
<head>
<title>变色的圆圈</title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body>
<script language="JavaScript">
var CoLoUrS=new Array('ff0000','ffffff','0000ff','ffffff');
var dots=16;
var step=0.3;
var a_StEp=0.05;
var RunTime=Xpos =Ypos =count_a=count=currStep =0;
var cntr=70;
var move_a=move=1;
var curColour;
document.write('<div id="moveDiv" style="position:absolute;top:0px;left:0px">');
for (i=0; i < dots; i++){
  document.write('<div style="position:absolute;top:0px;left:0px;width:2px;height:2px;background:#ffffff;font-size:2px"></div>');
}
document.write('</div>');
var x = moveDiv.all;
var numdiv=new Array(x[0],x[1],x[2],x[3],x[4],x[5],x[6],x[7],x[8],x[9],x[10],x[11],x[12],x[13],x[14],x[15]);
function colourStep(){
  count+=move;
  if (count >= numdiv.length) {count=0;count_a+=move}
  if (count_a == CoLoUrS.length) count_a=0;
  numdiv[count].style.background=CoLoUrS[count_a];
  setTimeout('colourStep()',100)
}
function divmove(){
  Ypos = document.body.scrollTop+document.body.offsetHeight/2 + document.body.offsetHeight/2.8*Math.cos((RunTime)/3)*Math.cos(RunTime/10);
  Xpos= document.body.scrollLeft+document.body.offsetWidth/2 + document.body.offsetWidth/2.4*Math.sin((RunTime)/5)*Math.sin(RunTime/20);
  RunTime+=a_StEp;
  Tma=setTimeout("divmove()", 10);
}
function overturn(){
  for (i=0;i<numdiv.length;i++){
    numdiv[i].style.top = Ypos+cntr*Math.cos((currStep + i*4)/10.2)*Math.cos(currStep/10);
    numdiv[i].style.left= Xpos+cntr*Math.sin((currStep + i*4)/10.2);
  }
  currStep+=step;
  setTimeout("overturn()",10);
}
function Shrink(){
  cntr-=0.5;
  GoShrink=setTimeout('Shrink()',10);
  if (cntr <=20){clearTimeout(GoShrink);Swell()}
}
function Swell(){
  cntr+=0.5;
  GoSwell=setTimeout('Swell()',10);
  if (cntr >=70){clearTimeout(GoSwell);Shrink()}
}
function transfer(){
  divmove();  //移动层
  overturn();  //使层进行翻转
  Shrink();  //改变层的大小
  colourStep();  //变换层的颜色
}
transfer();
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • JS完成画圆圈的小球

    JS完成画圆圈的小球

    效果图 图(1) 图(2) 代码如下: <html> <head> <title>JS动画之转动的小球</title> <style type="text/css"> div{width:20px;height:20px;background-color:black;position:absolute;border:1px solid red;border-radius:50%;} </style> </he

  • 原生javascript模仿win8等待提示圆圈进度条

    一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简单介绍 原生javascript编写,需要理解js基于面向对象编程和圆形坐标计算! 实现原理:把每个圆点抽象成一个对象(ProgressBarWin8类型),将每个圆点对象存在数组中(progressArray),延迟执行每个圆点对象的run方法,至于圆点运行速度越来越快,是通过改变定时器延迟毫秒数

  • js+canvas简单绘制圆圈的方法

    js+canvas简单绘制圆圈的方法

    本文实例讲述了js+canvas简单绘制圆圈的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh

  • Javascript实现可旋转的圆圈实例代码

    Javascript实现可旋转的圆圈实例代码

    本文实例讲述了Javascript实现可旋转的圆圈.分享给大家供大家参考.具体如下: 这里基于Javascript实现会旋转的圆圈,有点三维变幻的效果,立体感很强,代码主要是基于JS,学习Js脚本编程来说,是个学习JS生成动画的好范例. 运行效果如下图所示: 具体代码如下: <html> <head> <title>旋转的圆圈</title> <meta http-equiv="Content-Type" content="

  • javascript实现3D变换的立体圆圈实例

    javascript实现3D变换的立体圆圈实例

    本文实例讲述了javascript实现3D变换的立体圆圈.分享给大家供大家参考.具体如下: 这里使用javascript实现会变换的立体圆圈,在网页3D变化,变色的圆圈特效,网页上的3d圆圈特效.圆圈上的每一点的颜色并不一样,在黑色的网页背景下更能看清楚. 运行效果如下图所示: 具体代码如下: <html> <head> <title>变色的圆圈</title> <style type="text/css"> <!--

  • javascript实现点击后变换按钮显示文字的方法

    本文实例讲述了javascript实现点击后变换按钮显示文字的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>显示一些按钮,如果点击了, 当前点击的按钮文本变为"点了",其他按钮文本变为"没点"</title> <script type="text/javascript

  • JavaScript基于SVG的图片切换效果实例代码

    JavaScript基于SVG的图片切换效果实例代码

    最近太忙了,自动来到rjxy后,不晓得怎么回事,忙的都没时间更博了. 昨天还有个同学跟我说,你好久没更新博客了.. 甚为惭愧~~ 正好12月来了,今天开一篇. 最近上课讲到了 SVG,不晓得同学们理解到没. -_-!!! 图片轮播见的太多,今天就用 SVG 写了一个图片轮播,效果如下. 效果要求 点击控制块,图片切换.切换的时候使用圆形做遮罩,由小到大变化.每次切换的时候,圆的位置随机产生. 主要知识点 1. SVG 的裁切(遮罩),clip-path 的运用. 2. SVG 利用 JS 更改层

  • 原生javascript实现文件异步上传的实例讲解

    原生javascript实现文件异步上传的实例讲解

    效果图: 代码:(demo33.jsp) <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>demo33.jsp</title> </head> <body> <label for="text">名称</label>

  • JavaScript正则表达式校验与递归函数实际应用实例解析

    JS递归函数(菲波那切数列) 实例解析: 一组数字:0 1 1 2 3 5 8 13 0 1 2 3 4 5 6 7 sl(0)=0; sl(1)=1; sl(2)=sl(0)+sl(1); sl(3)=sl(1)+sl(2); function sl(i){ if(i==0){ return 0; }else if(i==1){ return 1; }else{ return sl(i-1)+sl(i-2); } } 正则表达式检验 //校验是否全由数字组成 function isDigit(

  • JavaScript实现实时更新系统时间的实例代码

    一.Js代码 function getTime(){ str = "当前系统时间:" var p = document.getElementById("sy_time"); time = new Date(); year = time.getFullYear(); month = time.getMonth() + 1; day = time.getDate(); hour = time.getHours(); minutes = time.getMinutes()

  • [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉. function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = function(){ return this.userName; } var obj1 = new CreateObj('ghostwu'); var obj2 = new CreateObj('卫庄')

  • javascript汉字拼音互转的简单实例

    如下所示: var PinYin = { charDict : "YDYQSXMWZSSXJBYMGCCZQPSSQBYCDSCDQLDYLYBSSJGYZZJJFKCCLZDHWDWZJLJPFYYNWJJTMYHZWZHFLZPPQHGSCYYYNJQYXXGJHHSDSJNKKTMOMLCRXYPSNQSECCQZGGLLYJLMYZZSECYKYYHQWJSSGGYXYZYJWWKDJHYCHMYXJTLXJYQBYXZLDWRDJRWYSRLDZJPCBZJJBRCFTLECZSTZF

  • JavaScript中boolean类型之三种情景实例代码

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co

  • Javascript农历与公历相互转换的简单实例

    如下所示: /**用法 * Lunar.toSolar(2016, 6, 3); 农历转化公历 * Lunar.toLunar(2016, 7, 6); 公历转化农历 */ var Lunar = { MIN_YEAR : 1891, MAX_YEAR : 2100, lunarInfo : [ [0,2,9, 21936], [6,1,30, 9656], [0,2,17, 9584], [0,2,6, 21168], [5,1,26,43344], [0,2,13,59728], [0,2,

随机推荐