js将任意元素移动到指定位置

最新推荐文章于 2025-05-28 10:54:20 发布

转载

最新推荐文章于 2025-05-28 10:54:20 发布 · 2.3k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fyy-new/p/9283807.html

本文介绍了如何使用JavaScript将元素移动到指定位置，强调了需将元素设置为绝对定位，并通过设置定时器和循环来逐步调整位置。在实际操作中，需要注意清除定时器以避免速度异常加快，以及正确使用offset属性获取元素位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路：将某元素移动到指定位置======需传入2个参数。一个是要移动的元素element，另一个是指定的位置target。

获取元素的当前位置current，设置一个每次移动的距离step，设置定时器，通过多次循环移动，到达目标位置。根据当前位置和目标位置的距离判断是否需要执行循环

以本文为例，点击按钮1，div移动到400px的位置，点击按钮2 ，移动到1600px，这里有几个坑：

1、元素要移动，需要脱离文档流，即css样式中需要使用绝对定位

2、每触发一次点击，就产生一个定时器，当不停地点击按钮时，元素移动的速度不断加快

===》解决：只设置一个定时器，且在执行定时器之前先清理一次定时器，防止上次的操作留下影响。

只设置一个定时器可以根据对象的属性，对象点出来的属性有且只有一个。即element.timer1=setInterval();

3、获取元素的当前位置，需要用offsetLeft / offsetTop / offsetWidth / offsetHeight,得出的结果是number类型，没有px

html以及css样式

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>    
 6         <style>
 7             div{
 8                 width: 200px;

最低0.47元/天解锁文章

200万优质内容无限畅学