Question

我正在尝试编写一个函数，通过随时间调整其“左”样式来移动元素。目前它目前还没有完全正常运作。

    var tab;
    var tabPos;

    function init() {
        tab = document.getElementById("tab");
        tabPos = 10.8;
        tab.style.left = tabPos + '%';
    }

    function moveOver( ) {
        if (tabPos < 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos + 0.1;
                tab.style.left = tabPos + '%';
            }
        else if (tabPos > 15.8)
            {
                setTimeout(function moveOver( ), 100;
                tabPos = tabPos - 0.1;
                tab.style.left = tabPos + '%';
            }
     }

init函数成功设置了元素的初始位置，但我将moveOver函数添加到代码中，不再设置元素的位置。

Answer 1

setTimeout函数调用的括号未关闭：

function moveOver( ) {
    if (tabPos < 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos + 0.1;
            tab.style.left = tabPos + '%');  // <----
        }
    else if (tabPos > 15.8)
        {
            setTimeout(function moveOver( ), 100;
            tabPos = tabPos - 0.1;
            tab.style.left = tabPos + '%'); // <----
        }

 }

您应查看浏览器报告的JavaScript错误。

Answer 2

将setTimeout(function moveOver( ), 100;更改为setTimeout(moveOver, 100);

Answer 3

更改行：

setTimeout(function moveOver( ), 100;

到

setTimeout(moveOver, 100);

function moveOver( )不是有效的JavaScript语法。此外，您的括号（或括号）不匹配。因为您有语法错误，所以您的代码将无效。

对于setTimeout，您应该将函数作为第一个参数传递，因此mouseOver或function(){mouseOver();}将起作用。

你的剧本的另一个问题是，你会看到元素不断跳跃。

您有两个条件：tabpos < 15.8和tabpos > 15.8。执行不输入任何一个if-blocks的条件是tabpos == 15.8 ...但JavaScript的Number实际上是一个浮点数。由于精度错误，15.8 == 15.7 + 0.1将导致false，这表明15.8与15.7 + 0.1不完全相同。实际上，15.7 + 0.1 约等于15.799999999999999 ...

因此，我建议您使用tabPos的整数值，例如158，并在设置样式时将其除以10。

您的代码的可能结果：

var tab;
var tabPos;

function init() {
    tab = document.getElementById("tab");
    tabPos = 108;
    tab.style.left = tabPos / 10 + '%';
}

function moveOver( ) {
    if (tabPos < 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos + 1;
            tab.style.left = tabPos / 10 + '%';
        }
    else if (tabPos > 158)
        {
            setTimeout(moveOver, 100);
            tabPos = tabPos - 1;
            tab.style.left = tabPos / 10 + '%';
        }
 }

Javascript函数问题

3 个答案: