js实现div移动

最新推荐文章于 2025-06-20 08:41:11 发布

哒仔

最新推荐文章于 2025-06-20 08:41:11 发布

阅读量4.8k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：网络编程文章标签： JavaScript 动画

本文链接：https://blog.youkuaiyun.com/bggglby/article/details/88032604

本文介绍如何使用JavaScript实现div元素的移动，以创建数据存储位置变化的示例。通过CSS设置格子布局，然后利用JavaScript实现列的左右移动效果，重点讲解了使一列div向左移动的js代码实现。

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

之后想做一个可以展示数据存储位置变化的示意图，前期先做简单的两列互换。

首先先把格子画出来，因为想做列的移动，所以一列是一个div。
HTML：

   <div class="box">
       <div id="box1">
           <div class="in" style="background: #FE4365">1</div>
           <div class="in" style="background: #FE4365">4</div>
           <div class="in" style="background: #FE4365">7</div>
           <div class="in" style="background: #FE4365">10</div>
           <div class="in" style="background: #FE4365">13</div&