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

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

Javascript: 一个简单的收缩菜单效果; HTML-CSS群中单选引发的“事件”; 打开超链需要“确认”对话框的方法; 用js实现网页上模仿桌面右键菜单; 可以文本显示的公告栏的js代码; [原创]js与自动伸缩图片自动缩小图片的多浏览器兼容的方法总结; 极致之美：百行代码实现全新智能语言; 表单(FORM)的一些实用效果代码; [原创]提供复制本站内容时出现,该文章转自等字样的js代码; javascript中巧用“闭包”实现程序的暂停执行功能; 给网站上的广告“加速”显示的方法; [原创]jser必看的破解javascript各种加密的反向思维方法; 用javascript代替marquee的滚动字幕效果代码; 静态页面下用javascript操作ACCESS数据库(读增改删)的代码; [原创]由亿起发(eqifa.com)的页面发现顶部的http://16a.us/8.js想到的js解密; [原创]站长必须要知道的javascript广告代码; js defineSetter -给js的 "class"自动增加一个set的属性(方法); Javascript & DHTML 实例编程（教程）（三）初级实例篇1—上传文件控件实例; WordPress 插件：CoolCode使用方法与下载; 文档处理系列：随时更新

No. « ‹ 181 182 183 184 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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