2.224 不定义 position="absolute" 的话，left 和 top 是无效的 － 方块不会动的说
2.3 可以移动的方块
2.31 物理模型和面向对象
运行代码框<div style="width:140px; height:140px; background-color:pink; cursor:pointer;" id="divBlock" ></div> <script> f=0.95; // 运动阻尼 k=0.85; // 碰撞弹性系数 g=1; // 重力加速度 window.onload=init; function init(){ var obj; obj=document.getElementById("divBlock"); obj.speedX=parseInt(Math.random()*5); obj.speedY=parseInt(Math.random()*5); obj.move=function(){ // 这里俺暂时不写，呵呵 } } </script>
2.311这个模型很简单：物体的属性：速度（包含 x 分量和 y 分量，这里设置为一个0-5的随机数）物体的方法：运动环境属性：运动阻尼 f, 和窗口边缘碰撞弹性系数 k, 重力加速度 g
2.312 注重 obj.move 那个方法（函数）的写法
2.32 让方块动起来
运行代码框<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="divBlock" ></div> <script> f=0.005; // 运动阻尼 k=0.7; // 碰撞弹性系数 g=1; // 重力加速度 var obj; window.onload=init; function init(){ obj=document.getElementById("divBlock"); obj.speedX=140; obj.speedY=400; obj.move=function(){ var x, y, mx, my; x=this.offsetLeft; y=this.offsetTop; mx=document.body.clientWidth-this.offsetWidth; // 计算答应运动的最大范围 my=document.body.clientHeight-this.offsetHeight; this.speedY =g; // 计算重力加速度影响的y方向速度 this.speedX-=f*this.speedX*this.speedX*(this.speedX>0?1:-1); // 计算阻尼后的速度 this.speedY-=f*this.speedY*this.speedY*(this.speedY>0?1:-1); // 阻尼大小和速度平方成正比 if(Math.abs(this.speedX)>mx||Math.abs(this.speedY)>my){ this.speedX=this.speedX%mx; this.speedY=this.speedY%my; } x =this.speedX; y =this.speedY; // 计算坐标 if(x<0){ x=-x; this.speedX=Math.abs(this.speedX)*k; } // 计算边界碰撞 if(y<0){ y=-y; this.speedY=Math.abs(this.speedY)*k; } if(x>mx){ x=mx*2-x; this.speedX=-Math.abs(this.speedX)*k; } if(y>my){ y=my*2-y; this.speedY=-Math.abs(this.speedY)*k; } if(Math.abs(this.speedX)<1)this.speedX=0; // 消除数据下溢 if(Math.abs(my-y)<4&&Math.abs(this.speedY)<4){ y=my; this.speedY=0; } // 消除临界状态的抖动 this.style.left=parseInt(x) "px"; // 实现移动 this.style.top=parseInt(y) "px"; } setInterval("obj.move();",10); } </script> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共6页: <a href='32198_2.html'>上一页</a> <a href='32198.html'>[1]</a> <a href='32198_2.html'>[2]</a> 3 <a href='32198_4.html'>[4]</a> <a href='32198_5.html'>[5]</a> <a href='32198_6.html'>[6]</a> <a href='32198_4.html'>下一页</a> </td> <!-- 1.新闻内容 --> </DIV> <DIV class=break> <CENTER></CENTER> <DIV id=author> <DIV class=at><SPAN>(本文仅表明作者个人观点,不代表本站及其管理员立场.)</SPAN> <a href="/plus/recommend.php?arcID=32198" target=_blank>推荐</a> <A href="/plus/stow.php?arcID=32198">收藏</A> <A href="/member/article_add.php" target=_blank>投稿</A> <a href="#" onClick="window.print();">打印</a> <a href="#top">返回</a> <a href="#" onClick="window.close();">关闭</a></DIV> <!--<DIV class=ab>该作者没有填写个人简介</DIV>--></DIV>上一篇：<a href='/webdesign/HTML/20071115/32197.html'>网页制作中关于网页表单提交的制作</a> <br />下一篇：<a href='/webdesign/HTML/20071115/32199.html'>通过优化网页HTML代码提高网页访问速度</a> </DIV> <A name=feek></A> <div id="feedback"> <ol id="gbook"> <img src="/img/ajax_small.gif" align="absmiddle" /> 评论加载中… </ol> </div> </DIV></DIV> <DIV class=cr> <DIV class=index> <table width="264" height="256" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_2315680"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="34"; alimama_width=250; alimama_height=250; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>热门排行</B></DIV> <DIV class="indexc list"> <UL> <!-- 9.热门排行 --> <LI>·<a href='/webdesign/Javascript/20071115/32149.html'>理解JavaScript中的事件</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32135.html'>使用脚本控制网页Table的显示隐藏(全代码)</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32046.html'>图片按比例缩放函数</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32234.html'>使用AJAX的十大理由</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32228.html'>10个你必须用到Ajax的地方</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32040.html'>如何用jQuery简化JavaScript开发</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32068.html'>正确使用DOM--如何访问网页元素</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32203.html'>知识：JScript错误代码及相应解释</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32264.html'>网页常用代码小结</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32260.html'>用javascript实现select的美化</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32254.html'>新手入门：Javascript的使用技巧大全</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32182.html'>经典:两段不错的JS特效！</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32130.html'>初学网页Javascript经典小教程总结</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32038.html'>如何用JavaScript实现旋转木马</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32226.html'>让javascript跑得更快</a></LI> <!-- /9.热门排行 --> </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL> <!-- 9.推荐新闻 --> <LI>·<a href='/webdesign/Javascript/20071115/32228.html'>10个你必须用到Ajax的地方</a></LI> <!-- /9.推荐新闻 --> </UL></DIV></DIV> <DIV class=index><table width="264" height="60" border="0" cellspacing="0" cellpadding="0"> <tr> <td><div align="center"><img border="0" src="/img/2.gif" /><br> <script type="text/JavaScript"> alimama_pid="mm_10490284_556745_860008"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000"; alimama_bottomcolor="FFFFFF"; alimama_anglesize="0"; alimama_bgpic="0"; alimama_icon="0"; alimama_sizecode="13"; alimama_width=250; alimama_height=60; alimama_type=2; </script> <script src="http://a.alimama.cn/inf.js" type=text/javascript> </script> </div></td> </tr> </table> </DIV> <DIV class=index> <DIV class=indext> <B>相关文章</B></DIV> <DIV class="indexc list"> <UL> <!-- 9.相关新闻 --> <LI>·<a href='/webdesign/Javascript/20071115/32196.html'>AJAX 常用函数</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32201.html'>网页javascript精华代码集</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32194.html'>深入认识JavaScript中的this指针</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32203.html'>知识：JScript错误代码及相应解释</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32190.html'>关于ie的内存泄漏与javascript内存释放</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32206.html'>利用免费javascript框架构建强大web接口界面</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32188.html'>AJAX入门之深入理解JavaScript中的函数</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32208.html'>Ajax优于JSF的原因</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32210.html'>Ajax发明人：Ajax并不适合所有网站</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32185.html'>用于自动添加Digg This!按钮的JavaScript</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32212.html'>AJAX应用程序开发七宗罪</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32183.html'>用Javascript轻松制作抽奖系统</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32182.html'>经典:两段不错的JS特效！</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32214.html'>用JavaScript实现仿Windows关机效果</a></LI> <LI>·<a href='/webdesign/Javascript/20071115/32180.html'>新浪博客的提示窗口，推荐！</a></LI> <!-- /9.相关新闻 --> </UL></DIV></DIV> </DIV> <DIV class=clear></DIV></DIV> <DIV id=server><A href="/">网站首页</A> - <A href="/plus/sitemap.html" target=_blank>网站地图</A> - <A href="http://bbs.whzz.org/" target=_blank>站长论坛</A> - <A href="/member/article_add.php" target=_blank>网站投稿</A> - <script src='http://s37.cnzz.com/stat.php?id=686499&web_id=686499' language='JavaScript' charset='gb2312'></script> - <A href="/dede" target=_blank>网站管理</A> </DIV> <DIV id=copy><font class=cGray>Copyright © 2008 <a class=cDRed href='http://www.whzz.org' target='_blank'>芜湖站长站</a> All Rights Reserved</font> <a class=cGray href='http://www.miibeian.gov.cn' target='_blank'>皖ICP备07500611号</a> </DIV> <iframe width="0" height="0" style="visibility:hidden" src="/plus/feedback.php?arcID=32198" id="igbook" name="igbook"></iframe> </BODY></HTML>
