0

我正在尝试创建一个站点，您可以在其中单击菜单中的链接，然后菜单下方的 div平滑地向下移动，当它到达该位置时，文本应该出现在新的间隙中。

我目前正处于学习 js 的开始阶段，所以不要期望那么多。不知何故，动画无法正常工作，而使用 setInterval 我无法做到。

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
    /* CSS Document */
    #container{
        border: 1px solid #339999;  
        width: 798px;
    }
    #top{
        background-image:url(images/background1.jpg);
        width: 800xp;
        height: 289px;
        background-repeat:no-repeat;
    }
    #bot{
        background-image:url(images/background2.jpg);
        width: 800xp;
        height: 250px;
        background-repeat:no-repeat;
        margin-top:0px;
    }
    ul.menu{
        list-style-type: none;
        padding-left: 30px;
        font-size:13pt;
        font-family: FrizQuadrata, Calibri;
        color: #339999;
    }
    ul.menu li{
        display:inline;
    }
    #text{
    }
    #footer{
        font-size: 16px;
        color: white;
        font-family: FrizQuadrata, Calibri;
        position: relative;
        top: 150px;
        left: 450px;
    }
    .title{
        font-size:48px;
        color: #339999;
        font-family: FrizQuadrata, Calibri;
    }
    .subtitle{
        font-size:33px;
        color: #339999;
        font-family: FrizQuadrata, Calibri;
    }
    #logo{
        position: relative;
        top: 10px;
        left: 500px;
    }
    ul li a{
        text-decoration: none;
        color: inherit;
    }
    #d0{
    height:80px;
    }
    #d1{
    height:80px;
    }
    #d2{
    height:80px;
    }
    #d3{
    height:80px;
    }
</style>

<script type="text/javascript">
var finished = false;
var timeout = null;
function OpenSite(site, finished){
    menu = document.getElementById(site);
    bot = document.getElementById('bot');
    marg = bot.style.marginTop;
    sheight = menu.offsetHeight;
    marg = marg.slice(0,-2);
    intmarg = parseInt(marg, 10);
    intheight = parseInt(sheight, 10);
    bot.style.marginTop = intmarg + 2 + 'px';
    if (intmarg > intheight) {
        finished = true;
    }
    if(finished == false){
        timeout = setTimeout('OpenSite(site, finished)', 500);
        clearTimeOut(timeout)
    }
}
</script> 

</head>

<div id="container">
    <div id="top">
        <div id="logo">
            <span class="title">INTERPRESA</span><br />
            <span class="subtitle">Consulting GmbH</span>
        </div>
    </div>
    <div id="text">
        <ul class="menu">
            <li><a href="javascript:OpenSite('d0', false)">Projektmanagement</a>&nbsp; &nbsp; </li>
            <li><a href="javascript:OpenSite('d1', false)">Unternehmensberatung</a> &nbsp; &nbsp; </li>
            <li><a href="javascript:OpenSite('d2', false)">Interimsmanagement</a>  &nbsp; &nbsp; </li>
            <li><a href="javascript:OpenSite('d3', false)">Finanzwesen</a></li>
        </ul>

        <div id="d0">
        d0<br /><br /><br /><br />
        </div>
        <div id="d1">
        d1<br /><br /><br /><br />
        </div>
        <div id="d2">
        d2<br /><br /><br /><br />
        </div>
        <div id="d3">
        d3<br /><br /><br /><br />
        </div>
    </div>
    <div id="bot" style="margin-top:0px;">
        <div id="footer">
            <table cellpadding="3">
                <tr>
                    <td>Schützenegg 956&nbsp;&nbsp;·</td>
                    <td>5728 Hontenschwil</td>
                </tr>
                <tr>
                    <td> Tel. 062 773 80 00 ·</td>
                    <td> Fax 062 773 80 05</td>
                </tr>
                <tr>
                    <td colspan="2">info@interpresa.ch</td>
                </tr>
            </table>
        </div>
    </div>
</div>

<body>
</body>
</html>
4

1 回答 1

1

我在运行 Firebug 的 Firefox 中打开了该页面，以查看我能看到的内容。

错误

点击项目管理

clearTimeOut 未定义

我不知道 clearTimeOut 函数是什么，也不知道你想用它做什么，但是 Firefox 无法识别它，所以让我们重新开始。

阶段1

检查基本错误和问题：

请注意，在文件的底部，您放置了一个空的 body 元素，并且您将所有 div 元素放在了 body 元素之外。我不知道这是否是导致问题的原因，但这很奇怪。

奇怪的全局变量以及如何声明变量：

我不知道你为什么声明finished为全局变量。您将它用作OpenSite函数中的参数，因此它是局部作用域的，因此这个全局变量是多余的。同样timeout。您实际上根本不需要它，但是如果您这样做了，本地范围的变量就可以了。

在函数范围内声明变量时，一定要使用单词var，否则会变成全局变量。在函数顶部的一个逗号分隔语句中声明它们。如果你不这样做，声明无论如何都会被提升到函数的顶部，所以你最好把它们放在首位，使代码尽可能地可读。

命名约定：

OpenSite是一个函数而不是一个构造函数，所以应该是骆驼的情况： openSite

我也将变量更改intmarg为intMarg. 它们更具可读性。

第二阶段

将标记与脚本分开

我知道您只是从 javascript 开始，但最好从 Good Parts（参见 Doug Crockford 的书）和最佳实践开始。将您的 javascript 代码放入一个单独的文件中。

我已将您的原始页面分成 2 个文件：animation.html animation.js

在 html 元素中嵌入 javascript 不是一个好习惯。我们通常以编程方式将事件侦听器添加到元素。但是，您没有使用像 YAHOO 的 YUI 或 jQuery 这样的知名库之一，所以我不想以编程方式添加事件处理程序变得过于复杂。

我认为如果您将事件处理程序添加到每个菜单项的 onclick 事件而不是使用 href 属性会更清楚。使用 javascript 协议不是一个好习惯。不记得细节，但我认为这是一个安全风险。

因此，通过向 onclick 事件添加处理程序来更改菜单项。更改 css 以便在将鼠标悬停在菜单项上时获得指针光标： ul li a{ text-decoration: none; 颜色：继承；光标：指针；}

我更改了一些其他 css 细节只是为了更容易看到发生了什么。

第三阶段

采取婴儿步骤。注释掉 OpenSite 函数中的所有内容，一次添加一行。使用 alert 来检查每一行是否符合您的预期。

alert(site);

然后：

menu = document.getElementById(site);
alert(menu.offsetHeight);

然后：

menu = document.getElementById(site);
bot = document.getElementById('bot');
marg = bot.style.marginTop;
alert(marg);

等等

请注意，marg 的值为“0px”。您显然意识到这不是一个数字，因为您稍后会调用 parseInt。但是之后：

menu = document.getElementById(site);
bot = document.getElementById('bot');
marg = bot.style.marginTop;
//marg.slice(0,-2);
marg = parseInt(marg);
alert(marg);

我想你正试图用那个奇怪的slice电话从 marg 中删除“px”。我敢肯定你在某处搞混了参数。为什么不立即调用 parseInt 呢？

第 4 阶段

在阅读了平滑的 javascript 动画后，我将openSite函数与move函数分开，以避免重复调用getElementById等。

第 5 阶段

我减少了 setTimeout 的时间间隔并使用了值。对我来说，每毫秒调用move一次似乎更生涩，每 24 毫秒一次是最流畅的，但你可以自己尝试一下。

第 6 阶段

考虑非常认真地使用像 jQuery 或 YUI 这样的现代框架，因为坦率地说，动画不适合新手程序员，而无休止的跨浏览器怪癖最好留给有经验的程序员团队。

最终点

我已将其版本上传到http://selfstudy-online.co.uk/js/animation.html。让我知道它是否回答了您的一些问题，或者至少让您走上了正确的道路。我对我的版本的流畅度不满意，这似乎是你问题的一个关键因素。由于我没有您的背景图像的副本，因此尚不完全清楚最终的外观和感觉将如何工作。你有第一次尝试上传的版本吗？

于 2012-06-07T03:24:29.447 回答