js 网页中文本块碰壁反弹特效,有控制按钮

发布时间：2018-09-16 05:05:29 所属栏目：语言来源：站长网

导读：js 网页中文本块碰壁反弹特效,有控制按钮，碰壁物体可设置大小，设置完成，点击开始可看到运动效果，当物体的四边或论是哪个边碰到外框时，都会自动反弹，类似的效果被广泛应用于游戏开发中。演示： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transi

　　js 网页中文本块碰壁反弹特效,有控制按钮，碰壁物体可设置大小，设置完成，点击“开始”可看到运动效果，当物体的四边或论是哪个边碰到外框时，都会自动反弹，类似的效果被广泛应用于游戏开发中。

　　演示：

<!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=utf-8" /> <title>碰壁反弹</title> <style> #text {width:500px;height:300px;border:10px red solid;margin:0 auto;position:relative;} #div1 {width:50px;height:50px;border:5px yellow solid;position:absolute;} </style> </head> <body> <div id="text"> <div id="div1"></div> </div> <input type="button" value="开始"/> <input type="button" value="变大"/> <input type="button" value="变小"/> <input type="button" value="停止"/> </body> <script type="text/javascript"> var text = document.getElementById("text"); var div1 = document.getElementById("div1"); var a = div1.offsetTop; var b = div1.offsetLeft; var id = true; var id2 = true; var ss=null; var qw = 50; var ge = true; var gg = true; function pbft(){ var width = text.clientWidth; var height = text.clientHeight; var width2 = div1.offsetWidth; var height2 = div1.offsetHeight; var width3 = width - width2; var height3 = height - height2; if(id){ if(b<width3){ b++; this.div1.style.left = b + "px"; }else{ id = false; } }else{ if(b>0){ b--; this.div1.style.left = b + "px"; }else{ id=true; } } if(id2){ if(a<height3){ a++; this.div1.style.top = a + "px"; }else{ id2 = false; } }else{ if(a>0){ a--; this.div1.style.top = a + "px"; }else{ id2=true; } } } function dian(){ var da = document.getElementsByTagName("input")[1]; var xiao = document.getElementsByTagName("input")[2]; var stop = document.getElementsByTagName("input")[3]; var kais = document.getElementsByTagName("input")[0]; ade(da,'click',function(){bd()}); ade(xiao,'click',function(){bx()}); ade(stop,'click',function(){tz()}); ade(kais,'click',function(){ks()}); } // Resources from http://www.veryhuo.com/down function ade(a,b,c){ if (a.addEventListener) { a.addEventListener(b,c,false) }else{ a["on"+b] = c ; } } function ks(){ if (ss) { clearInterval(ss); } ss = setInterval(pbft,10); } function bd(){ if (qw<=200) { qw++; this.div1.style.width = qw + "px"; this.div1.style.height = qw + "px"; clearTimeout(ge); gg = setTimeout(bd,20) } } function bx(){ if (qw>50) { qw--; this.div1.style.width = qw + "px"; this.div1.style.height = qw + "px"; clearTimeout(gg); ge = setTimeout(bx,20) } } function tz(){ clearInterval(ss); clearTimeout(gg); clearTimeout(ge); } dian(); </script> </html>  <script type='text/javascript' src='http://www.Liehuo.net/Res/share/jscss/Liehuo_r.js?btn=r3.gif' charset=utf-8></script> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

JS怎样完成移动端的拖	CSS的两列布局和三列布
用JS怎样实现鼠标移动	一篇学会 Java 问题排