封装运动二:div匀速运动到目标位置后原路返回
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 100px; } </style> </head> <body> <button id="rbtn">出发</button> <button id="lbtn">返回</button> <div id="box"></div> <script src="tool.js"></script> <script> /*匀速运动: 让div原路返回,让left值回到原来的值 var orBtn = ById('rbtn'); var olBtn = ById('lbtn'); var oBox = ById('box'); var timer = null; orBtn.onclick = function () { sport1(); } function sport1(){ clearInterval(timer); timer = setInterval(function () { oBox.style.left = oBox.offsetLeft + 2 + "px"; if (oBox.offsetLeft == 400) { clearInterval(timer); } }, 30) } olBtn.onclick = function () { sport2(); } function sport2(){ clearInterval(timer); timer = setInterval(function () { oBox.style.left = oBox.offsetLeft - 2 + "px"; if (oBox.offsetLeft == 0) { clearInterval(timer); } }, 30) } */ //以上代码基本上实现了我们要的效果,但是垃圾代码太多,需要重新书写更加优雅的代码 var orBtn = ById('rbtn'); var olBtn = ById('lbtn'); var oBox = ById('box'); var timer = null; orBtn.onclick = function () { sport(400,2); } olBtn.onclick = function () { sport(0,-2); } function sport(target,speed){ clearInterval(timer); timer = setInterval(function () { oBox.style.left = oBox.offsetLeft + speed + "px"; if (oBox.offsetLeft == target) { clearInterval(timer); } }, 30) } //优雅化代码后会发现,这个程序依旧存在一个bug,关于用户传参的问题,根据上面的代码我们知道用户需要传两个参数, //一个是目标距离,一个是速度,距离我们可以让用户自己确定,但是速度并不好掌控,在后面的缓存运动中,会更深刻的理解 //这一点,所以,我们在程序中设置好速度,只需用户传一个参就ok了。 </script> </body> </html>
在程序中如何设置速度,画个简单的图理解一下:
通过图解可以看出speed=target-oDiv.offset,div向右移动时速度是正值,div向左移动时速度是负值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #box { width: 100px; height: 100px; background: red; position: absolute; left: 0; top: 100px; } </style> </head> <body> <button id="rbtn">出发</button> <button id="lbtn">返回</button> <div id="box"></div> <script src="tool.js"></script> <script> var orBtn = ById('rbtn'); var olBtn = ById('lbtn'); var oBox = ById('box'); var timer = null; orBtn.onclick = function () { sport(400); } olBtn.onclick = function () { sport(0); } function sport(target){ clearInterval(timer); timer = setInterval(function () { var speed = target - oBox.offsetLeft > 0 ? 2 : -2; oBox.style.left = oBox.offsetLeft + speed + "px"; if (oBox.offsetLeft == target) { clearInterval(timer); } }, 30) } </script> </body> </html>
以上div匀速运动到目标位置后原路返回就写完了。
下面再做一个分享到的小案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding:0; margin:0; } #box{ width: 300px; height:300px; background: rgb(248, 242, 242); position:absolute; top:100px; /* left:-300px; */ } #share{ display:inline-block; height:80px; width:30px; background: yellow; font-size:18px; position:absolute; left:300px; top:110px; } </style> </head> <body> <div id = "box"><span id = "share">分享到</span></div> </body> </html> <script src = "tool.js"></script> <script> var oShare = ById('share'); var oDiv = ById('box'); var timer = null; oDiv.onmouseenter = function(){ divmove(0,oDiv) } oDiv.onmouseleave = function(){ divmove(-300,oDiv) } function divmove(target,obj){ clearInterval(timer); timer = setInterval(function(){ var speed = target - obj.offsetLeft > 0 ? 2 : -2; if( target ==speed){ clearInterval(timer); }else{ oDiv.style.left = obj.offsetLeft + speed + "px" ; } },30) } </script>