JS-运动基础（一）

it2022-05-05 76

<title>无标题文档</title> <style> #div1{width:200px;height:200px; background:red; position:absolute; left:0px; top:50px;} </style> <script> var timer=null; function startMove() { var oDiv=document.getElementById('div1'); clearInterval(timer); //为避免同时开启多个定时器 timer=setInterval(function (){ var speed=10; if(oDiv.offsetLeft>300) { clearInterval(timer); } else //if...else避免在到达终点位置后按开始按钮再次执行else里面的语句而使物体运动 { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script> </head> <body> <input id="btn1" type="button" value="开始运动" onclick="startMove()"/> <div id="div1"> </div> </body>

运动框架及应用

运动框架

1.在开始运动时，关闭已有定时器

2.把运动和停止隔开（if/else）

运动框架实例分享

1.”分享到“侧边栏

通过目标点，计算速度值

<title>无标题文档</title> <style> #div1{width:150px; height:200px; background:green; position:absolute; left:-150px;} #div1 span{position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px;top:70px;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmouseover=function () { startMove(); } oDiv.onmouseout=function () { startMove2(); } }; var timer=null; function startMove() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ if(oDiv.offsetLeft==0) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+10+'px'; } },30); } function startMove2() { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ if(oDiv.offsetLeft==-150) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft-10+'px'; } },30); } </script> </head> <body> <div id="div1"> <span>分享到</span> </div> </body>

改进1

window.οnlοad=function () { var oDiv=document.getElementById('div1'); oDiv.οnmοuseοver=function () { startMove(10,0); } oDiv.οnmοuseοut=function () { startMove(-10,-150); } }; var timer=null; function startMove(speed,iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script>

改进2

window.οnlοad=function () { var oDiv=document.getElementById('div1'); oDiv.οnmοuseοver=function () { startMove(0); } oDiv.οnmοuseοut=function () { startMove(-150); } }; var timer=null; function startMove(iTarget) { var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function (){ var speed=0; if(oDiv.offsetLeft>iTarget) { speed=-10; } else { speed=10; } if(oDiv.offsetLeft==iTarget) { clearInterval(timer); } else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); } </script>

转载于:https://www.cnblogs.com/919czzl/p/4320012.html

相关资源：JS运动基础框架实例分析

专利

最新回复(0)