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 ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
Node.js检测端口(port)是否被占用的简单示例
Sep 29 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
vue项目中仿element-ui弹框效果的实例代码
Apr 22 Javascript
原生JS实现图片懒加载之页面性能优化
Apr 26 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 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
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
destoon之一键登录设置
2014/06/21 PHP
PHP类的反射用法实例
2014/11/03 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
jQuery.Form上传文件操作
2017/02/05 Javascript
详解如何在NodeJS项目中优雅的使用ES6
2017/04/22 NodeJs
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
Vue+jquery实现表格指定列的文字收缩的示例代码
2018/01/09 jQuery
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
javascript+HTML5 canvas绘制时钟功能示例
2019/05/15 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
python3中关于excel追加写入格式被覆盖问题(实例代码)
2020/01/10 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
销售经理工作职责
2014/02/03 职场文书
项目负责人任命书
2014/06/04 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
论文答辩开场白大全
2015/05/27 职场文书
投资入股协议书
2016/03/22 职场文书