2007-01-04

网页制作前台之javascript

来源: 蓝色理想作者:hutia 评论 0 条

运行代码框
<div style="width:140px; height:140px; background-color:pink; cursor:pointer; position:absolute;" id="divBlock" ></div> <script> f=0.003; // 运动阻尼 k=0.8; // 碰撞弹性系数 g=0.6; // 重力加速度 var obj, timeHandle; window.onload=init; function init(){ obj=document.getElementById("divBlock"); obj.speedX=0; obj.speedY=0; obj.lastX=obj.offsetLeft; obj.lastY=obj.offsetTop; obj.move=function(){ this.stop(); 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"; this.timeHandle=setTimeout("obj.move();",10); } obj.stop=function(){ clearTimeout(this.timeHandle); } obj.onmousedown=function(){ this.stop(); divBlock_event_mousedown(arguments[0]); } obj.move(); } function divBlock_event_mousedown(e){ var e, temp; e=window.event?window.event:e; obj.startX=e.clientX-obj.offsetLeft; obj.startY=e.clientY-obj.offsetTop; document.onmousemove=document_event_mousemove; temp=document.attachEvent?document.attachEvent("onmouseup",document_event_mouseup):document.addEventListener("mouseup",document_event_mouseup,""); } function document_event_mousemove(e){ var e; e=window.event?window.event:e; with(obj.style){ position="absolute"; left=e.clientX-obj.startX "px"; top=e.clientY-obj.startY "px"; } obj.speedX=(obj.offsetLeft-obj.lastX)*3; obj.speedY=(obj.offsetTop-obj.lastY)*3; obj.lastX=obj.offsetLeft; obj.lastY=obj.offsetTop; } function document_event_mouseup(e){ var temp; document.onmousemove=""; temp=document.detachEvent?document.detachEvent("onmouseup",document_event_mouseup):document.removeEventListener("mouseup",document_event_mouseup,""); obj.move(); } </script> </td> <br> </td> </tr> <tr align="left"> <td colspan="2">共6页: <a href='32198_4.html'>上一页</a> <a href='32198.html'>[1]</a> <a href='32198_2.html'>[2]</a> <a href='32198_3.html'>[3]</a> <a href='32198_4.html'>[4]</a> 5 <a href='32198_6.html'>[6]</a> <a href='32198_6.html'>下一页</a> </td>  </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>上一篇：<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>  <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>  </UL> </DIV></DIV> <DIV class=index> <DIV class=indext> <B>推荐文章</B></DIV> <DIV class="indexc list"> <UL>  <LI>·<a href='/webdesign/Javascript/20071115/32228.html'>10个你必须用到Ajax的地方</a></LI>  </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>  <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>  </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>