如何使用JavaScript实现Div元素的往复移动动画？

我帮你排查了代码里的问题，主要有两个关键点导致元素不动，同时也帮你补上了往复移动的逻辑：

问题1：DIV元素没有onload事件 #

你在创建div时设置了onload="$hubbe.move()"，但普通的DIV元素并不支持onload事件，这个事件通常只用于<img>、<script>这类资源加载型元素。所以你的$hubbe.move()函数根本没有被触发，这就是元素完全不动的核心原因。

解决方法：在把div添加到页面后，直接手动调用$hubbe.move()来启动动画。

问题2：缺少往复移动的逻辑 #

你当前的move函数只会让movex一直递增，元素只会往右移动，不会往回走。需要添加方向判断，比如设定一个移动范围，当到达边界时反转移动方向。

修改后的完整代码 #

var $hubbe = {};

$hubbe.movex = 0;
// 添加方向变量，1为向右，-1为向左
$hubbe.direction = 1;
// 设定移动的边界范围（相对于初始位置的左右偏移量）
$hubbe.maxOffset = 200;

$hubbe.move = function() {
    // 根据方向更新移动距离
    $hubbe.movex += $hubbe.direction * 10; // 每次移动10px，速度可自行调整
    
    // 检查是否到达边界，反转移动方向
    if (Math.abs($hubbe.movex) >= $hubbe.maxOffset) {
        $hubbe.direction *= -1;
    }
    
    // 基于初始的50%位置计算偏移，保证往复中心不变
    $hubbe.newdiv.style.left = `calc(50% + ${$hubbe.movex}px)`;
    
    // 用requestAnimationFrame替代setTimeout，动画更流畅
    requestAnimationFrame($hubbe.move);
}

$hubbe.printelement = function() {
    $hubbe.div = document.createElement("DIV");
    $hubbe.div.setAttribute("id", "newdiv");
    $hubbe.div.innerHTML = "hej";
    $hubbe.div.style.position = "absolute";
    $hubbe.div.style.left = "50%";
    $hubbe.div.style.top = "50%";
    // 把创建的div保存到全局变量中
    $hubbe.newdiv = $hubbe.div;
    document.body.appendChild($hubbe.div);
    
    // 直接调用move函数启动动画
    $hubbe.move();
}

// 启动创建元素和动画逻辑
$hubbe.printelement();

额外优化说明 #

• 替换setTimeout为requestAnimationFrame：这是浏览器专为动画设计的API，会和浏览器刷新频率同步，动画更流畅且性能更好。
• 调整移动步长：把每次移动1px改成10px（可自行修改），让移动效果更直观。
• 边界判断逻辑：通过Math.abs($hubbe.movex)检测是否到达设定的偏移边界，反转方向实现往复效果。

现在运行修改后的代码，div就会从初始位置开始左右往复移动了。

内容的提问来源于stack exchange，提问作者Sebastian Andersson