Question

我是一个愚蠢的网站创建者，我在使用javascript时遇到了一些问题。我在互联网上找到了一个功能，现在我将它与更多东西结合起来。但它根本不起作用。我对javascript没什么经验。

Javascript文件：

function getOff(){z = this.ElementId;
 x = document.getElementById('button_shadow' + z);
 return x.offsetLeft;}

function move_right(value){var y = getOff();
 x.style.left = y + value;}

HTML：

<img src="img/button_shadow.png" class="button_shadow" style="top: 218px; left: 5px;" id="button_shadow1">
<img src="img/button_shadow.png" class="button_shadow" style="top: 259px; left: 5px;" id="button_shadow2">

<script src="js/button_shadow_move.js"></script>
<a class="tlacitko_bok" style="top: 0px;" href="o_klubu.html" id="1" onmouseover="getOff(); move_right(5);">O klubu</a>
<a class="tlacitko_bok" style="top: 41px;" href="fotogalerie.html" id="2" onmouseover="getOff(); move_right(5);">Fotogalerie</a>

css：

a.tlacitko_bok:hover{margin-left: 5px;}

谢谢。

Answer 1

您可以简化和改进代码。你只能留下这个功能：

function move_right(obj, value) {
    var x = document.getElementById('button_shadow' + obj.id);
    x.style.left = x.offsetLeft + value + 'px';
}

并在HTML中使用它：

<a id="1" onmouseover="move_right(this, 5);" ...>O klubu</a>

演示：http://jsfiddle.net/efu8n/

您犯了错误：您应该使用id属性，而不是ElementId。如果你调用它们，你的函数中的上下文也将是Window，而不是你与之交互的目标元素。因此，您只需传递引用对象this即可用于检索id。

html Javascript通过<a> button</a>上的onmouseover移动图片

1 个答案:

演示：http://jsfiddle.net/efu8n/