javascript实现3D变换的立体圆圈实例
更新时间：2015年08月06日 15:53:28 作者：皮蛋
这篇文章主要介绍了javascript实现3D变换的立体圆圈效果,涉及javascript动态操作页面元素实现滚动与变色的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
其实防抖和节流不仅仅在面试中会让大家手写，在实际项目中也可以起到性能优化的作用，所以还是很有必要掌握的。本文就带大家彻底学会JavaScript手写防抖节流，需要的可以参考一下2022-11-11
这篇文章主要介绍了使用js转化毫秒为时间格式的具体实现,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了js删除对象中的某一个字段的方法实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
本文给大家分享js设置ios中微信浏览器中的title的解决方法，实现原理比较简单，对js微信浏览器title相关知识感兴趣的朋友一起通过本文学习吧2016-11-11
JavaScript实现QueryString获取GET参数的方法
本文为大家详细介绍下如何通过JavaScript实现QueryString获取GET参数，具体实现如下，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
浅谈es6中export和export default的作用及区别
下面小编就为大家分享一篇浅谈es6中export和export default的作用及区别，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了JavaScript获取select中text值的方法,涉及javascript针对HTML页面元素相关判断与获取操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要介绍了JS集合set类的实现与使用方法,结合具体实例形式分析了javascript集合的创建、元素添加、删除以及并集、交集、补集等运算相关操作技巧,需要的朋友可以参考下2019-02-02
xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之tree，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
networkInformation.downlink测用户网速方法详解
这篇文章主要为大家介绍了networkInformation.downlink测用户网速方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-05-05
最新评论