<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: lightcoral; position: absolute; margin-top: 30px; left: 0px; } </style> </head> <body> <button id="btn1">点击移动到400px</button> <button id="btn2">点击移动到800px</button> <div id="box"></div> <script src="common.js"></script> <script> my$("btn2").onclick = function () { //只需要产生一个定时器, 可以先清理定时器, 再设置 clearInterval(this.timeId); this.timeId = setInterval(function () { //1.获取div当前的位置--->看成盒子当前的left值 var current = my$("box").offsetLeft;//400 //2.div每一次移动多少像素 = 10 即步数 var step = 10; //3.每次移动后的距离 current += step; //4.判断移动后的位置是否达到目标位置 if(current <= 800){ my$("box").style.left = current + "px"; }else{ //清理定时器 clearInterval(this.timeId); } },30) } //封装匀速动画函数--->任意一个元素移动到指定的目标位置 //@params : 元素 目标位置 function animate(element,target ) { //先清理定时器 clearInterval(element.timeId) element.timeId = setInterval(function () { //1.获取div当前的位置--->看成盒子当前的left值 var current = element.offsetLeft;//number类型 //2.div每一次移动多少像素 = 10 即步数 var step = 7; //2.1判断往哪边移动 step = current <= target ? step : -step; //3.每次移动后的距离 current += step; ////4.判断剩余的步数是否大于 step if(Math.abs(target - current) > Math.abs(step)){ element.style.left = current + "px"; }else{ clearInterval(element.timeId); element.style.left = target + "px"; } },20) } my$("btn1").onclick = function () { animate(my$("box"), 400); } my$("btn2").onclick = function () { animate(my$("box"), 800); } </script> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: lightcoral; position: absolute; margin-top: 30px; left: 0px; } </style> </head> <body> <button id="btn1">点击移动到400px</button> <button id="btn2">点击移动到800px</button> <div id="box"></div> <script src="common.js"></script> <script> my$("btn2").onclick = function () { //只需要产生一个定时器, 可以先清理定时器, 再设置 clearInterval(this.timeId); this.timeId = setInterval(function () { //1.获取div当前的位置--->看成盒子当前的left值 var current = my$("box").offsetLeft;//400 //2.div每一次移动多少像素 = 10 即步数 var step = 10; //3.每次移动后的距离 current += step; //4.判断移动后的位置是否达到目标位置 if(current <= 800){ my$("box").style.left = current + "px"; }else{ //清理定时器 clearInterval(this.timeId); } },30) } //封装匀速动画函数--->任意一个元素移动到指定的目标位置 //@params : 元素 目标位置 function animate(element,target ) { //先清理定时器 clearInterval(element.timeId) element.timeId = setInterval(function () { //1.获取div当前的位置--->看成盒子当前的left值 var current = element.offsetLeft;//number类型 //2.div每一次移动多少像素 = 10 即步数 var step = 7; //2.1判断往哪边移动 step = current <= target ? step : -step; //3.每次移动后的距离 current += step; ////4.判断剩余的步数是否大于 step if(Math.abs(target - current) > Math.abs(step)){ element.style.left = current + "px"; }else{ clearInterval(element.timeId); element.style.left = target + "px"; } },20) } my$("btn1").onclick = function () { animate(my$("box"), 400); } my$("btn2").onclick = function () { animate(my$("box"), 800); } </script> </body> </html>
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
