打印

Js模拟三角函数曲线

shoppingcat [楼主]

初级会员

帖子: 83
体力: 194
威望: 1
离线: 144 天

专长 网页设计,JS,PHP

1^# 大中小发表于 2008-10-31 09:29

纯属无聊产物，呵~

<!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>

提示：您可以先修改部分代码再运行

猫眼看人^^

TOP

西部数码港台主机新上线即买即用 | 211工程高起专、高起本、专升本

cloudgamer

天空里的一片云

版主

认证
帖子: 4135
体力: 8354
威望: 13
当前: 广东佛山

2^# 大中小发表于 2008-10-31 10:46

不错不错

技术blog

图片放大图片切换

TOP

PSD网页模板下载,高端实用 | 微软 visual studio 2010 专题

mypda07

中级会员

帖子: 151
体力: 298
威望: 2
当前: 湖南长沙
离线: 409 天

专长 网页设计,UI,JS

3^# 大中小发表于 2008-10-31 11:24

有趣

TOP

刘宾设计咨询机构/案例集1.3下载(268p) | 用画笔实现你的“原画设计师”梦想！

Reany

Reany

初级会员

帖子: 71
体力: 141
威望: 0
当前: 北京昌平区
离线: 73 天

专长 前端制作,JS,.NET

4^# 大中小发表于 2008-11-1 09:39

这个,有点意思啊,有点意思

我不能签名

TOP

qhg8809

新手上路

帖子: 30
体力: 47
威望: 0
当前: 北京海淀区
离线: 606 天

5^# 大中小发表于 2008-11-1 10:34

功能这么强大那个牛人写的！！

创造神话

TOP

weir55

新手上路

帖子: 10
体力: 26
威望: 0
离线: 20 天

6^# 大中小发表于 2008-11-1 12:56

很好很强大

TOP

fukai7722

新手上路

帖子: 23
体力: 42
威望: 0
当前: 北京朝阳区
离线: 32 天

7^# 大中小发表于 2008-11-6 18:15

怎么用这些函数做类似于mootools里那些弹性效果呢

TOP

wangdybyt

义薄云天

高级会员

认证
帖子: 466
体力: 842
威望: 0
当前: 上海卢湾
离线: 5 天

专长 前端制作,JS,.NET

8^# 大中小发表于 2008-11-6 19:41

不错，学习！
敢问楼主是做哪行的？

www.makerlover.com

TOP

ime

高级会员

帖子: 429
体力: 890
威望: 2
当前: 浙江温州
离线: 28 天

专长 网页设计,前端制作,ASP

9^# 大中小发表于 2009-6-17 11:31

很强悍，我喜欢~~~

上品流行 http://shop57093577.taobao.com

TOP

cokebug

中级会员

帖子: 138
体力: 273
威望: 0
当前: 上海长宁
离线: 173 天

10^# 大中小发表于 2009-6-17 12:09

很好很强大

TOP

faeng220

小秦

版主

认证
帖子: 2354
体力: 4315
威望: 6
当前: 河南平顶山

专长 前端制作,JS,ASP

11^# 大中小发表于 2009-6-17 15:12

原创?转帖?

偶系小秦！

TOP

yy8597

中级会员

认证
帖子: 137
体力: 283
威望: 0
当前: 上海徐汇

专长 JS,ASP,.NET

12^# 大中小发表于 2009-6-17 15:17

有机会要复习下各种函数和公式了。。

TOP