0

我似乎无法找到这个问题的答案，所以我想我会问。我正在编写我的第一个网站，当鼠标悬停在每个单独的导航元素上时，我正在使用一点点 Javascript 向上滑动它。然后在鼠标移出时它会向下滑动。

它工作正常，除非当鼠标在“向上”有时间向下滑动之前从“向上”元素变为“向下”元素时，它会变得混乱并保持向上，而“向下”元素认为它应该滑动向下。我认为新的鼠标悬停事件与前一个事件混淆了，但我不确定如何修复它。

我希望这能解释我的问题，这是我正在使用的代码（CSS 非常简单，位置对于每个导航选项卡都是相对的，所以我没有显示它）：

Javascript：

var cartridges, obj, lastObj;
var velocity = 2;

function setUp() {
    if (!document.getElementById) return;
        cartridges = document.getElementsByClassName('navigation');
    for (var i = 0; i < cartridges.length; i++) {
        cartridges[i].onmouseover = slideUp;
        cartridges[i].onmouseout = slideDown;
   }
}

function slideUp(e) {
    if (!e) var e = window.event;
    obj = (e.target) ? e.target: e.srcElement;
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up -= velocity; // update parameters     
        obj.style.top = up + "px"; // show frame
        if (up <= -100)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

function slideDown() {
    var up = obj.style.top;
    up = up.substring(0, up.length - 2);
    parseInt(up);

    function frame() { 
        up++;  // update parameters 
        obj.style.top = up + "px";
        if (up >= 0)  // check finish condition (negative because that pushes it up, otherwise it would go down
            clearInterval(id);
    }
    var id = setInterval(frame, 10); // draw every 10ms 
}

window.onload = setUp;

HTML：

<div id="navigation">
            <ul>
                <li><a  class="navigation" href="index.html" ><img id="home" alt="Home" src="../images/cartridge_grey_index.png" /></a></li>
                <li><a  class="navigation" href="aboutme.html"><img id="aboutme" alt="About Me" src="../images/cartridge_grey_aboutme.png" /></a></li>
                <li><a  class="navigation" href="resume.html"><img id="resume" alt="resume" src="../images/cartridge_grey_resume.png" /></a></li>
                <li><a  class="navigation" href="projects.html"><img id="projects" alt="projects" src="../images/cartridge_grey_projects.png" /></a></li>
                <li><a  class="navigation" href="blog.html"><img id="blog" alt="blog" src="../images/cartridge_grey_blog.png" /></a></li>
                <li><a  class="navigation" href="contact.html"><img id="contact" alt="contact" src="../images/cartridge_grey_contact.png" /></a></li>
            </ul>
        </div>
4

2 回答 2

0

就像是

.navigation:hover { margin-top: 2; }

可能就是你所需要的。

然后你可以添加

transition-property: margin-top;
transition-duration: 1s;

一点额外的眼睛糖果。

当然，你可能更喜欢在你的项目中添加一个 80K 的库，然后编写大量代码来处理鼠标悬停事件之类的，即使同样的事情可以在一行 CSS 中完成，因为使用 jQuery 会让你感觉像，你知道，一个真正的程序员。

于 2013-01-26T03:00:01.753 回答
0

如果您是 Web 新手，尤其是 Javascript 世界的新手，我强烈建议您使用 jQuery 或 MooTools 等库来完成滑动菜单。已经有很多插件可用，或者如果你想完成学习过程，你可以很容易地自己连接起来。

jQuery 提供了方便的方法，例如 .mouseover() 和 .slideUp()，这使得这项任务几乎是微不足道的，或者您可以从其他效果列表中进行选择，例如淡入淡出和显示/隐藏。作为额外的奖励，您还将获得所有浏览器的兼容性。

欲了解更多信息，请查看：http ://api.jquery.com

于 2013-01-26T03:09:37.390 回答