Question

我在JS为我未来的网站编写了一个代码并且一切都很好，但这里唯一不好的是菜单中矩形（div）随制动器移动。我的意思是它必须像在网站中我想要拥有的一些功能。 http://lusens.ru/主菜单上的矩形鼠标非常流畅。我无法理解为什么在我的情况下它不会发生。

这是html的一部分

<body>
    <ul >           
        <li id="a1" onmouseover="highlightMenu('a1')">Первый пункт</li>
        <li id="a2" onmouseover="highlightMenu('a2')">Второй пункт точка</li>
        <li id="a3" onmouseover="highlightMenu('a3')">Третьий пункт точка и запятая</li>
        <li id="a4" onmouseover="highlightMenu('a4')">Четвёртый пункт</li>
    </ul>
<div id="d1"></div>

和JS文件

function highlightMenu(id) {
    time = 0;


    var rect = document.getElementById(id).getBoundingClientRect();
    var width = document.getElementById(id).offsetWidth;
    var idTop = rect.top;
    var idLeft = rect.left;

    var rect1 = document.getElementById('d1').getBoundingClientRect();
    var shadowWidth = document.getElementById('d1').offsetWidth;
    var shadowLeft = rect1.left;
    var shadowTop = rect1.top;


    if (shadowLeft < idLeft) {
        for (i = shadowLeft, time = 50; i < idLeft - 3; i++, time += 5) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);
        }
    } else {
        for (i = shadowLeft, time = 50; i > idLeft - 3; i--, time += 5) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);
        }
    }

    if (shadowWidth < width) {
        for (i = shadowWidth; i < width + 10; i++, time += 0.01) {
            setTimeout("document.getElementById('d1').style.width='" + i + "px'", time);
        }
    } else {
        for (i = shadowWidth; i > width + 10; i--, time += 0.01) {
            setTimeout("document.getElementById('d1').style.width='" + i + "px'", time);
        }
    }


    if (shadowLeft < idLeft) {

        for (i = idLeft + 3; i < idLeft + 20; i++, time += 25) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);

        }
        for (i = idLeft + 20; i > idLeft - 5; i--, time += 50) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);

        }
    } else {
        for (i = idLeft - 3; i > idLeft - 20; i--, time += 25) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);

        }
        for (i = idLeft - 20; i < idLeft - 5; i++, time += 50) {
            setTimeout("document.getElementById('d1').style.left='" + i + "px'", time);

        }

    }
}

http://jsfiddle.net/m2SBm/

Answer 1

使用onmouseover导致多次触发事件处理函数，最好使用onmouseenter事件。而且不是调度50个超时，而是使用单个超时和全局变量，以便动画可以停止。

HTML：

<ul id="menu">
    <li>Первый пункт</li>
    <li>Второй пункт точка</li>
    <li>Третьий пункт точка и запятая</li>
    <li>Четвёртый пункт</li>
</ul>
<div id="d1"></div>

使用Javascript：

var rect, rect1; // rectangles
var shadow; // shadow div
var bpos; // begin position
var epos; // end position
var width, shadowWidth;
var step; // animation step 1..50
var timer = null;

function animateRect() {
    step++;
    if (step > 50) {
        clearInterval(timer);
        timer = null;
        return;
    }
    var t = bpos.t + Math.round((epos.t - bpos.t) * step / 50);
    var l = bpos.l + Math.round((epos.l - bpos.l) * step / 50);
    var w = shadowWidth + Math.round((width - shadowWidth) * step / 50);
    shadow.style.top = t + "px";
    shadow.style.left = l + "px";
    shadow.style.width = w + "px";
}

function highlightMenu(e) {
    e = e || window.event; // for IE8,7 compatibility
    var item = e.target || e.srcElement; // for IE8,7
    if (timer) {
        clearInterval(timer);
    }
    step = 0;
    rect = item.getBoundingClientRect();
    width = item.offsetWidth;
    epos = {
        t: rect.top,
        l: rect.left
    };

    rect1 = shadow.getBoundingClientRect();
    shadowWidth = shadow.offsetWidth;
    bpos = {
        t: rect1.top,
        l: rect1.left
    };
    timer = setInterval(animateRect, 5);
}



function init() {
    var menu = document.getElementById('menu');
    var items = menu.getElementsByTagName('li');
    for (var i = 0; i < items.length; i++) {
        items[i].onmouseenter = highlightMenu;
    }
    shadow = document.getElementById('d1');
    shadow.style.width = items[0].offsetWidth + 'px';
    shadow.style.top = items[0].getBoundingClientRect().top + 'px';
    shadow.style.left = items[0].getBoundingClientRect().left + 'px';
}

if (window.addEventListener) {
    window.addEventListener('load', init, false);
} else if (window.attachEvent) {
    window.attachEvent('onload', init);
}

JSFiddle：http://jsfiddle.net/m2SBm/6/（使用getBoundingClientRect函数）

更新：

要使菜单与最终滚动条一起正常工作，请计算元素偏移位置，而不是使用getBoundingClientRect函数，如以下答案所示： finding element's position relative to the document

以下是菜单中透明度的附加CSS：

ul#menu, ul#menu li {
    position:relative;
    background-color:transparent;
}
#d1 {
    z-index:-10;
}

此处有完整菜单：http://jsfiddle.net/m2SBm/8/

JavaScript矩形跟随菜单中的光标

1 个答案: