<!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> <div id="divMiddle" > <div id="divM" onClick="IO()">設定完以後從新啟用元素然後點我！！</div> </div> <p> <input type="button" value="重新啟用元素" id="back" 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="立即停止" onclick="Stop()" /> </p> </body> </html>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
這裡啟動並執行是我的壓縮版代碼(在網上運行有些卡)，我會馬上把，完整版和帶注釋的代碼上傳(寫得很詳細，第一次在部落格裡發代碼，還挺難控制！哈哈!),還有高手們不要見笑，我用的是很笨的方法，過些日子會有新特效上傳，（這個彈簧是我做的網頁裡的一個按鈕特效，我那個網頁裡有很多特效，網頁還沒做完，等做完我就把所有原創特效都發上來）。因為我還在學習，發表新特效的時間可能很慢，請大家諒解!(大家多多想一些特效樣式，給我點靈感,哈哈!)
編程思路:
主要用的是物理的思維,想象彈簧運動的過程，然後用If else 和 else if 類比出來，因為任何事物的行為都是如果..那麼..所以用If else 就可以搞定！
出處：http://www.cnblogs.com/NONE/
打包下載
