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 相关文章推荐
[原创]图片分页查看
Aug 28 Javascript
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
jquery合并表格中相同文本的相邻单元格
Jul 17 Javascript
js实现汉字排序的方法
Jul 23 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
详解Webstorm 新建.vue文件支持高亮vue语法和es6语法
Oct 26 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
Nov 08 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
Sep 02 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
图象函数中的中文显示
2006/10/09 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
thinkPHP实现签到功能的方法
2017/03/15 PHP
斜45度寻路实现函数
2009/08/20 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jQuery实现无限往下滚动效果代码
2016/04/16 Javascript
ArtEditor富文本编辑器增加表单提交功能
2016/04/18 Javascript
妙用Angularjs实现表格按指定列排序
2017/06/23 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
js禁止Backspace键使浏览器后退的实现方法
2017/09/01 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
2018/11/27 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
Nuxt.js 静态资源和打包的操作
2020/11/06 Javascript
遍历python字典几种方法总结(推荐)
2016/09/11 Python
python中如何正确使用正则表达式的详细模式(Verbose mode expression)
2017/11/08 Python
python实现对csv文件的列的内容读取
2018/07/04 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python实现的爬取豆瓣电影信息功能案例
2019/09/15 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
英国大码女性时装零售商:Evans
2018/08/29 全球购物
什么时候用assert
2015/05/08 面试题
劳资员岗位职责
2013/11/11 职场文书
给分销商的致歉信
2014/01/14 职场文书
预备党员的自我评价
2014/03/12 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
文化建设工作方案
2014/05/12 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
工作失误检讨书范文
2015/01/26 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
javascript canvas实现雨滴效果
2021/06/09 Javascript