菜单中的JavaScript矩形跟随光标_Javascript_Html_Css_Javascript Events

菜单中的JavaScript矩形跟随光标

javascript html css

菜单中的JavaScript矩形跟随光标,javascript,html,css,javascript-events,Javascript,Html,Css,Javascript Events,我用JS为我未来的网站写了一段代码，这一切都很好，但唯一不好的是菜单中的矩形（div）随着刹车移动。我的意思是，它必须像在一个网站的一些特点，我想对我自己。主菜单上的矩形鼠标非常平滑。我不明白为什么我的情况没有发生这是html的一部分 <body> <ul > <li id="a1" onmouseover="highlightMenu('a1')">Первый пункт</li>

我用JS为我未来的网站写了一段代码，这一切都很好，但唯一不好的是菜单中的矩形（div）随着刹车移动。我的意思是，它必须像在一个网站的一些特点，我想对我自己。主菜单上的矩形鼠标非常平滑。我不明白为什么我的情况没有发生

这是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>






houseover=“highlightMenu（'a4'）”>

还有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);

        }

    }
}

功能高亮菜单（id）{
时间=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（阴影左idLeft-3；i--，time+=5）{
setTimeout（“document.getElementById（'d1'）.style.left='”+i+“px'”，时间）；
}
}
if（阴影宽度<宽度）{
对于（i=阴影宽度；i<宽度+10；i++，时间+=0.01）{
setTimeout（“document.getElementById（'d1'）。style.width='”+i+“px'”，时间）；
}
}否则{
对于（i=shadowWidth；i>width+10；i--，time+=0.01）{
setTimeout（“document.getElementById（'d1'）。style.width='”+i+“px'”，时间）；
}
}
if（阴影左idLeft-5；i--，时间+=50）{
setTimeout（“document.getElementById（'d1'）.style.left='”+i+“px'”，时间）；
}
}否则{
对于（i=idLeft-3；i>idLeft-20；i--，时间+=25）{
setTimeout（“document.getElementById（'d1'）.style.left='”+i+“px'”，时间）；
}
对于（i=idLeft-20；i


使用onmouseover
会多次触发事件处理程序函数，这里最好使用onmouseenter
事件。而且，与其安排50次超时，不如使用单个超时和全局变量，这样动画就可以停止
HTML:

Пццц
аааааа
бббббббббббб
Ч


Javascript:
var rect，rect1；//矩形
var shadow；//暗影师
var bpos；//起始位置
var-epos；//末端位置
变宽，阴影宽度；
var步骤；//动画步骤1..50
var定时器=null；
函数（）{
step++；
如果（步骤>50）{
清除间隔（计时器）；
定时器=空；
返回；
}
var t=bpos.t+数学舍入（（epos.t-bpos.t）*步长/50）；
var l=bpos.l+数学舍入（（epos.l-bpos.l）*步长/50）；
var w=阴影宽度+数学圆（（宽度-阴影宽度）*步长/50）；
shadow.style.top=t+“px”；
shadow.style.left=l+“px”；
shadow.style.width=w+“px”；
}
功能高亮菜单（e）{
e=e | | window.event；//用于IE8,7兼容性
var item=e.target | | e.srcmelement；//用于IE8,7
中频（定时器）{
清除间隔（计时器）；
}
步长=0；
rect=item.getBoundingClientRect（）；
宽度=item.offsetWidth；
epos={
t:rect.top，
左：右
};
rect1=shadow.getBoundingClientRect（）；
shadowWidth=shadow.offsetWidth；
bpos={
t:rect1.top，
l:1.左
};
定时器=设置间隔（5）；
}
函数init（）{
var menu=document.getElementById（'menu'）；
var items=menu.getElementsByTagName（'li'）；
对于（变量i=0；i

JSIDLE：（使用getBoundingClientRect
函数）
更新：
要使菜单在最终的滚动条上也能正常工作，请计算元素偏移位置，而不是使用getBoundingClientRect函数，如以下答案所示：

以下是菜单中透明度的附加CSS：
ul#菜单，ul#菜单li{
位置：相对位置；
背景色：透明；
}
#d1{
z指数：-10；
}

此处的完整菜单：
使用onmouseover
会多次触发事件处理程序函数，这里最好使用onmouseenter
事件。而且，与其安排50次超时，不如使用单个超时和全局变量，这样动画就可以停止
HTML:

Пццц
аааач