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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JavaScript 高仿真可控弹簧振子实现代码

Javascript: MooTools教程(3):数组管理DOM元素; MooTools教程(4):函数和MooTools; MooTools教程(5):事件处理; MooTools教程(6):操纵HTML DOM元素; MooTools教程(7):设置和获取样式表属性; MooTools教程(8):输入过滤-数字; MooTools教程(9):输入过滤-字符串; MooTools教程(10):Fx.Tween渐变; MooTools教程(11):Fx.Morph、Fx选项和Fx事件; MooTools教程(12):Drag.Move来实现拖放; MooTools教程(13):正则表达式; MooTools教程(14):定时器和Hash对象; MooTools教程(15):滚动条(Slider); 浏览器对Cookie的限制; 图片不间断滚动的特效代码详细讲解; Javascript教程:拖放效果研究; 不唐突的JavaScript; JavaScript教程:图片切割效果; 认识AJAX了解AJAX优点缺点和运用; 网页投票系统中的限制

No. « ‹ 166 167 168 169 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 259 ::

收藏到网摘: n/a

JS window.opener返回父页面的应用利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

我刚学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>
<div id="divMiddle" style=" position:absolute;top:200px;left:50%;width:1px;height:500px; background-color:#000">
<div id="divM" style="position:absolute; top:0px; left:-1px; width:273px; height:28px; background-color:#009; color:#FF0;" onClick="IO()">设置完以后从新激活元素然后点我！！</div>
</div>
<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()" />
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

这里运行的是我的压缩版代码(在网上运行有些卡)，我会马上把，完整版和带注释的代码上传(写得很详细，第一次在博客里发代码，还挺难控制！哈哈!),还有高手们不要见笑，我用的是很笨的方法，过些日子会有新特效上传，（这个弹簧是我做的网页里的一个按钮特效，我那个网页里有很多特效，网页还没做完，等做完我就把所有原创特效都发上来）。因为我还在学习，发表新特效的时间可能很慢，请大家谅解!(大家多多想一些特效样式，给我点灵感,哈哈!)
编程思路:
主要用的是物理的思维,想象弹簧运动的过程，然后用If else 和 else if 模拟出来，因为任何事物的行为都是如果..那么..所以用If else 就可以搞定！
出处：http://www.cnblogs.com/NONE/
打包下载

JS window.opener返回父页面的应用利用JQuery+EasyDrag 实现弹出可拖动的Div，同时向Div传值，然后返回Div选中的值

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

评论 (0) All