http://bbs.blueidea.com/viewthread.php?tid=2893888
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <meta name="description" content="javascript特效,正弦函数,余弦函数" />
- <meta name="copyright" content="http://hi.baidu.com/lpj1985" />
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>JS模拟三角函数</title>
- <script type="text/javascript">
- function $(id){
- return document.getElementById(id);}
- function gt(obj,tag){
- return obj.getElementsByTagName(tag);}
- </script>
- <style type="text/css">
- body,html{margin:0; background:#666}
- #container,#container1{position:absolute; width:600px; height:60px; left:50%; top:50%; margin:-30px 0 0 -300px; background:#bbb; border:1px #fff solid;}
- #container1{margin:-90px 0 0 -300px; border-bottom:none;}
- #container div.sin,#container div.cos{position:absolute; width:2px; height:2px; background:#900; overflow:hidden;}
- #container div.cos{background:#036}
- #opt{width:600px; height:20px; position:absolute; left:50%; top:50%; margin:60px 0 0 -300px; background:#ccc;}
- #opt span{font-family:Arial; font-size:12px; display:block; float:right; background:#888; height:20px; width:40px; line-height:20px; overflow:hidden;margin-left:1em; text-align:center; cursor:pointer;}
- #opt .sin,#opt .cos{color:#900; float:left; margin-left:0; margin-right:1em;}
- #opt .cos{color:#036;}
- </style>
- </head>
- <body onselectstart="return false">
- <div id="container1"></div>
- <div id="container"></div>
- <div id="opt">
- <span class="sin" onclick="shCur('sin')">sinX</span>
- <span class="cos" onclick="shCur('cos')">cosX</span>
- <span onclick="clearTimeout(timer)">Stop</span>
- <span onclick="mCur()">Play</span>
- <span onclick="spl('b')">PL+</span>
- <span onclick="spl('s')">PL-</span>
- <span onclick="szf('b')">ZF+</span>
- <span onclick="szf('s')">ZF-</span>
- </div>
- <script type="text/javascript">
- var zf=50; pl=0.05;x=0;
- //绘制曲线
- function drawCur(zf,pl){
- $('container').innerHTML="";
- rX=0;
- rY=0;
- for(i=1;i<=200;i++){
- var dsin=document.createElement("div");
- dsin.setAttribute("id","sin"+i);
- dsin.className="sin";
- dsin.style.left=rX+"px";
- dsin.style.top=Math.sin((i+x)*pl)*zf+"px";
- var dcos=document.createElement("div");
- dcos.setAttribute("id","cos"+i);
- dcos.className="cos";
- dcos.style.left=rX+"px";
- dcos.style.top=Math.cos((i+x)*pl)*zf+"px";
- rX+=3;
- rY+=pl;
- $('container').appendChild(dsin);
- $('container').appendChild(dcos);}
- }
- drawCur(zf,pl);
- //隐藏曲线
- function shCur(cur){
- var cdiv=gt($('container'),"div");
- for(i=0;i<cdiv.length;i++){
- if(cdiv[i].id.substring(0,3)==cur){
- cdiv[i].style.display=(cdiv[i].style.display=="block")?"none":"block";}
- }
- }
- //设置振幅、频率
- function szf(flag){
- if(flag=="b")zf+=5;
- if(flag=="s")zf-=5;
- drawCur(zf,pl);}
- function spl(flag){
- if(flag=="b")pl+=0.05;
- if(flag=="s")pl-=0.05;
- drawCur(zf,pl);}
- //让曲线动起来
- //不要变化太快,否则会吃尽内存的
- var timer;
- function mCur(){
- var cdiv=gt($('container'),"div");
- for(i=0;i<cdiv.length;i++){
- cid=parseInt(cdiv[i].id.substring(3,cdiv[i].id.length));
- if(cdiv[i].id.substring(0,3)=="sin"){
- cdiv[i].style.top=Math.sin((cid+x)*pl)*zf+"px";}
- if(cdiv[i].id.substring(0,3)=="cos"){
- cdiv[i].style.top=Math.cos((cid+x)*pl)*zf+"px";}
- }
- x++;
- timer=setTimeout(mCur,200)
- }
- mCur();
- var opt=gt($('opt'),"span");
- for(i=0;i<opt.length;i++){
- opt[i].onmouseover=function(){this.style.background="#aaa";}
- opt[i].onmouseout=function(){this.style.background="#888";}
- }
- </script>
- </body>
- </html>