JS模拟球落地、碰撞，用力扔出去弹来弹去

发布时间：2018-08-18 01:47:11 所属栏目：交互来源：站长网

导读：JS模拟球落地、碰撞，用力扔出去弹来弹去， Java Script结合图片完成的代码，随便拖到一个浏览器试试，就像跳跳球一样的效果，鼠标碰到某个浏览器的图标后，图标就会落下来。这个效果让我们想起烈火网以前发表的《跟随鼠标的小球，有弹性围绕鼠标扯蛋效果

　　JS模拟球落地、碰撞，用力扔出去弹来弹去，JavaScript结合图片完成的代码，随便拖到一个浏览器试试，就像跳跳球一样的效果，鼠标碰到某个浏览器的图标后，图标就会落下来。

　　这个效果让我们想起烈火网以前发表的《跟随鼠标的小球，有弹性围绕鼠标“扯蛋”效果》，尽管效果不太一样，但是都是使用JS脚本完成的，朋友们不妨一起研究。

　　示例：

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> <title>JS模拟球落地、碰撞，弹性小球，用力扔出去会弹来弹去 - 烈火网 Veryhuo.COM</title> <style type="text/css"> div{ padding:0; margin:0; position:absolute;} h3{ width:300px; height:40px; line-height:40px; font-size:14px; color:#950B0E; font-family:"<b>微软雅黑</b>"; margin:0 auto;} #img1{ width:82px;} div img{ width:100px;} #div1{ top:0; left:30px;} #div2{ top:0; left:130px;} #div3{ top:0; left:230px;} #div4{ top:0; left:330px;} #div5{ top:0; left:430px;} #div6{ top:130px; left:30px;} #div7{ top:130px; left:130px;} #div8{ top:130px; left:330px;} #div9{ top:130px; left:230px;} </style> <script type="text/javascript"> window.onload=function() { var oDiv1=document.getElementById('div1'); var oDiv2=document.getElementById('div2'); var oDiv3=document.getElementById('div3'); var oDiv4=document.getElementById('div4'); var oDiv5=document.getElementById('div5'); var oDiv6=document.getElementById('div6'); var oDiv7=document.getElementById('div7'); var oDiv8=document.getElementById('div8'); var oDiv9=document.getElementById('div9'); oDiv1.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv2.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv3.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv4.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv5.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv6.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv7.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv8.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; oDiv9.onmousedown=function (ev){oEvent=ev||event; drag(this,oEvent);}; }; var timer=null; function drag(obj,ev) { var disX=0; var disY=0; var iSpeedX=0; var iSpeedY=0; var arr=[]; (function fnDown() { disX=ev.clientX-obj.offsetLeft; disY=ev.clientY-obj.offsetTop; if(document.all) { }else{ ev.preventDefault(); } document.onmousemove=function(ev) { var oEvent=ev||event; var l=oEvent.clientX-disX; var t=oEvent.clientY-disY; if(l>document.documentElement.clientWidth-obj.offsetWidth) { l=document.documentElement.clientWidth-obj.offsetWidth; } else if(l<0) { l=0; } obj.style.left=l+"px"; obj.style.top=t+"px"; arr.push([obj.offsetLeft,obj.offsetTop]); return false; } document.onmouseup=function() { document.onmousemove = null; document.onmouseup = null; if(arr[0] == null || arr[1] == null) { iSpeedY=10; iSpeedX=10; } else { iSpeedY=arr[arr.length-1][1]-arr[arr.length-2][1]; iSpeedX=arr[arr.length-1][0]-arr[arr.length-2][0]; } clearInterval(obj.timer); stratMove(); } clearInterval(obj.timer); return false; })(); function stratMove() { obj.timer=setInterval(doMove,30); } function doMove() { iSpeedY+=3; if(Math.abs(iSpeedX)<1) { iSpeedX=0; clearInterval(obj.timer); } var l=obj.offsetLeft+iSpeedX; var t=obj.offsetTop+iSpeedY; if(l>document.documentElement.clientWidth-obj.offsetWidth) { iSpeedX *= -1; l=document.documentElement.clientWidth-obj.offsetWidth; } else if(l<0) { iSpeedX *= -1; l=0; } if(t>document.documentElement.clientHeight-obj.offsetHeight) { iSpeedY *= -1; iSpeedY *=0.75; iSpeedX *=0.75; t=document.documentElement.clientHeight-obj.offsetHeight; } obj.style.left=l+"px"; obj.style.top=t+"px"; } } </script> </head> <body> <h3>弹性小�，随便用鼠标抓住一个个浏览器图�，用力扔出，试试看 O(∩_�)O~</h3> <div style="width:400px; position:absolute; top:20px; right:0; font-size:24px; color:red; font-family:'微软雅黑';">web前端开发交流群�166284209</div> <div id="div1"><img src="/uploads/allimg/1111/veryhuo_com_1.png" /></div> <div id="div2"><img src="/uploads/allimg/1111/veryhuo_com_2.png" /></div> <div id="div3"><img src="/uploads/allimg/1111/veryhuo_com_3.png" /></div> <div id="div4"><img src="/uploads/allimg/1111/veryhuo_com_4.png" /></div> <div id="div5"><img src="/uploads/allimg/1111/veryhuo_com_5.png" /></div> <div id="div6"><img src="/uploads/allimg/1111/veryhuo_com_6.png" /></div> <div id="div7"><img src="/uploads/allimg/1111/veryhuo_com_7.png" /></div> <div id="div8"><img src="/uploads/allimg/1111/veryhuo_com_8.png" /></div> <div id="div9"><img src="/uploads/allimg/1111/veryhuo_com_9.png" /></div> </body> </html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：辽源站长网）

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