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


Posted in Javascript onAugust 06, 2015

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

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

运行效果如下图所示:

javascript实现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程序设计有所帮助。

Javascript 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
情人节之礼 js项链效果
Feb 13 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
Aug 09 Javascript
js 实现菜单上下显示附效果图
Nov 21 Javascript
Eclipse引入jquery报错如何解决
Dec 01 Javascript
详解Vue中添加过渡效果
Mar 20 Javascript
vue 2.0组件与v-model详解
Mar 27 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 #Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 #Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 #Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
Aug 06 #Javascript
js实现简单秒表走动的时钟特效
Mar 25 #Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 #Javascript
JS实现跟随鼠标的链接文字提示框效果
Aug 06 #Javascript
You might like
一个php作的文本留言本的例子(一)
2006/10/09 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
JQuery 入门实例1
2009/06/25 Javascript
js 页面传参数时 参数值含特殊字符的问题
2009/12/13 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
js倒计时小程序
2013/11/05 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
2016/10/26 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
微信小程序实现上拉加载功能示例【加载更多数据/触底加载/点击加载更多数据】
2020/05/29 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
将Emacs打造成强大的Python代码编辑工具
2015/11/20 Python
python实现读取大文件并逐行写入另外一个文件
2018/04/19 Python
pandas读取csv文件,分隔符参数sep的实例
2018/12/12 Python
Python数据相关系数矩阵和热力图轻松实现教程
2020/06/16 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python中pathlib模块的基本用法与总结
2020/08/17 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
CSS的pointer-events属性详细介绍(作用和注意事项)
2014/04/23 HTML / CSS
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
计算机大学生职业生涯规划书范文
2014/02/19 职场文书
周年庆促销方案
2014/03/15 职场文书
《乡下孩子》教学反思
2014/04/17 职场文书
2015年科研工作总结范文
2015/05/13 职场文书