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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery控制cookie过期时间的方法
Apr 07 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
JavaScript表单验证实例之验证表单项是否为空
Jan 10 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
PHP实现十进制数字与二十六进制字母串相互转换操作示例
2018/08/10 PHP
PHP 与 js的通信(via ajax,json)
2010/11/16 Javascript
JS高级笔记
2011/07/13 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
JavaScript变量作用域_动力节点Java学院整理
2017/06/27 Javascript
bootstrapvalidator之API学习教程
2017/06/29 Javascript
Vue 路由 过渡动效 数据获取方法
2018/07/31 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
Python实现优先级队列结构的方法详解
2016/06/02 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Django 前后台的数据传递的方法
2017/08/08 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
利用python脚本如何简化jar操作命令
2019/02/24 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
质检员的岗位职责
2013/11/15 职场文书
教师的实习自我鉴定
2013/12/17 职场文书
公司周年庆典邀请函
2014/01/12 职场文书
小学国庆节活动方案
2014/02/11 职场文书
企业人事任命书
2014/06/05 职场文书
经费申请报告
2015/05/15 职场文书
《颐和园》教学反思
2016/02/19 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
企业内部管理控制:采购授权审批制度范本
2020/01/19 职场文书
Django实现聊天机器人
2021/05/31 Python