JavaScript 高仿真可控弹簧振子实现代码

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高仿真弹簧振子（压缩使用版）</title> <script type="text/javascript"> /////////////////////////////您可根据，教学班里的说明自己删除,修改各种元素供自己使用（要不然把教版改了也行，这里的变量名都是教学版中变量名每个单词的第一个字母缩写，这里没有加改变平滑度的参数，已经是最平滑的了）。/////////////////////////////////////////////// 2009/10/20 吕良汉 var HI=false; function IO（） { SL=parseFloat（document.getElementById（"SL"）.value）+2; if（SL <=1） { alert（"速度损失>-1"）; return; } T =parseFloat（document.getElementById（"T"）.value）; if（T <0） { alert（"大哥！，我现在还不能让时光倒流"）; return; }if（HI==false）{HI=true;o= document.getElementById（"divM"）; SI =parseFloat（document.getElementById（"SI"）.value）; M（）;}} function Distance（） { o= document.getElementById（"divM"）; o.style.left=parseFloat（document.getElementById（"P"）.value）+"px"; }function Back（） {if（HR） { TS=false;HR=false;TOTM=0;IM=0; o.style.left=parseFloat（document.getElementById（"P"）.value）+"px"; SI=30; SL=3;HI=false; }} var TS = false; function S（） { TS=true; } //////////////////////////////////////////////////////////////////////////////////this is Spring Begin//////////////////////////////////////////////////////////////////////// var o=0; var T =0 var SI=30; var HR=false; var SC=1; var IM=true; var TOTM=0; var D="r"; var SIADAR =1; var SIADAL =1; var SL=3; function M（） { if（TS）{ HR=true; return;} if（HR）{ return; }if（SC>0）{ D="r"; if（TOTM%2==0）{ IM=true;}}else if（SC<0） {D="l";if（TOTM%2==1）{IM=true;}}if（o.offsetLeft<0&&TOTM==0）{o.style.left=o.offsetLeft+SI+"px";} if（TOTM==0）{ SC=SI;}if（TOTM！=0）{ o.style.left=o.offsetLeft+SC+"px";}if（o.offsetLeft>=0&&TOTM%2==0&&IM）{TOTM++;SC=SC-SL; IM=false; if（SC<=0）{ HR=true; return;}}else if（o.offsetLeft>=0&&D=="r"）{SC=SC-SIADAR;}else if（o.offsetLeft>=0&&D=="l"） {SC=SC-SIADAL; }else if（o.offsetLeft<=0&&TOTM%2==1&&IM） { TOTM++;SC=SC+SL; IM=false; if（SC>=0）{ HR=true; return; }}else if（o.offsetLeft<=0&&D=="l"）{SC=SC+SIADAR;}else if（o.offsetLeft<=0&&D=="r"&&TOTM！=0） {SC=SC+SIADAL;}setTimeout（"M（）",T）; } ///////////////////////////////////////////////////////////////Here spring is end////////////////////////////////////////////////////////////////////////////////////////// </script> </head> <body>设置完以后从新激活元素然后点我！！ <input type="button" value="重新激活元素" id="back" style="width:100px;height:25px;top:220px;left:500px;" onclick="Back（）"/>运行以后请从新激活 <br> 初始的速度（单位：像素/毫秒）:    <input type="text" id="SI"value="30" /> <br> 移动时间间隔（单位：毫秒）:      <input type="text" id="T" value="1" /> <br> 半个周期损失的（速度）能量（>-1）：  <input type="text" id="SL" value="1" /> <br> 开始位置到中轴的距离（单位：像素）：<input type="text" id="P" value="-1" onBlur="Distance（）"/> <br> <input type="button" id="stop" value="立即停止" style="width:100px;height:25px;top:220px;left:500px;" onclick="Stop（）" /> <br/> </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
这里运行的是我的压缩版代码（在网上运行有些卡），我会马上把，完整版和带注释的代码上传（写得很详细，第一次在博客里发代码，还挺难控制！哈哈！）,还有高手们不要见笑，我用的是很笨的方法，过些日子会有新特效上传，（这个弹簧是我做的网页里的一个按钮特效，我那个网页里有很多特效，网页还没做完，等做完我就把所有原创特效都发上来）。因为我还在学习，发表新特效的时间可能很慢，请大家谅解！（大家多多想一些特效样式，给我点灵感,哈哈！）

编程思路:
主要用的是物理的思维,想象弹簧运动的过程，然后用If else 和 else if 模拟出来，因为任何事物的行为都是如果..那么..所以用If else 就可以搞定！
出处：http://www.cnblogs.com/NONE/

打包下载