技术求助：如何通过HREF实现DIV移动？点击图片触发游戏角色位移

没问题，我来帮你把按钮控制改成点击目标角色图片触发移动的功能！下面是修改后的完整代码和关键改动说明：

修改后的完整代码 #

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>

<!-- 背景层 -->
<div id='Fondo' style="position:absolute;z-index:1;margin-left: 0px; margin-top: 0px; background-color:#000000; height:600px; width:800px">
  <img src="https://orig00.deviantart.net/6ddc/f/2018/003/4/b/principepio_by_darklordwriter-dbyrqix.png" alt="背景图" />
</div>

<!-- 目标角色层（点击这个角色让Mario移动过来） -->
<div id='Objetivo' style="position:absolute;z-index:2;margin-left: 225px; margin-top: 400px; height:100px; width:100px; cursor:pointer;">
  <img src="https://vignette.wikia.nocookie.net/finalfantasy/images/d/d0/FFRK_Thief_FFI.png" alt="目标角色">
</div>

<!-- Mario角色层 -->
<div id='Prota' style="position:absolute;z-index:3;margin-left: 0px; margin-top: 400px; height:100px; width:100px">
  <img src="https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif" alt="Mario" id='Walk'>
</div>

<script>
// 点击目标角色时触发Mario移动
$( "#Objetivo" ).click(function() {
  // 设置Mario的行走GIF
  $('#Walk').attr('src','https://orig02.deviantart.net/8996/f/2014/244/d/e/mario_by_nintentofu-d7xicg0.gif');
  
  // 获取目标角色的左侧位置
  var targetLeft = $('#Objetivo').position().left;
  
  // 让Mario动画移动到目标位置
  $( "#Prota" ).animate({
    left: targetLeft + "px"
  }, 4500 );
});
</script>

关键改动说明 #

• 移除了按钮元素：既然不需要按钮控制，直接删掉原来的<button>标签。
• 给目标角色添加点击交互：给#Objetivo容器添加了cursor:pointer样式，让鼠标悬停时显示手型，提示可点击；同时绑定了点击事件。
• 动态获取目标位置：用$('#Objetivo').position().left获取目标元素的左侧偏移量，这样不管你调整目标的位置，Mario都会自动移动到对应的位置，而不是固定的数值。
• 优化层级z-index：调整了各层的z-index值（背景1、目标2、Mario3），确保元素显示层级正确，避免被遮挡。
• 修正了样式单位：补充了原来缺失的px单位，让样式定义更规范。

这样修改后，你点击男性角色图片时，Mario就会自动移动到该角色的位置啦！

内容的提问来源于stack exchange，提问作者Isaac Valero Sevilla