Question

我正在尝试创建一个网站，您可以点击菜单中的链接，然后菜单下方的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>

Answer 1

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

错误

点击Projektmanagement

未定义clearTimeOut

我不知道clearTimeOut功能是什么，我不知道你尝试用它做什么，但是 Firefox无法识别它，所以让我们重新开始吧。

第1阶段

检查基本错误和问题：

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

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

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

在函数范围内声明变量时，请务必使用单词var，否则它们将成为全局变量。在函数顶部的逗号分隔语句中声明它们全部。如果你不这样做，那么声明会被提升到函数的顶部，所以你最好把代码放在那里尽可能让它们可读。

命名约定：

OpenSite是一个函数而不是构造函数，所以应该是驼峰式的： openSite

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

第2阶段

将标记与脚本分开

我知道你刚刚开始使用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细节，以便更容易看到发生了什么。

第3阶段

采取婴儿步骤。注释掉OpenSite功能中的所有内容，并一次添加一行。使用警报检查每一行是否正在做你期望的事情。

alert(site);

然后：

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

然后：

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

等

请注意，marg的值为＆＃34; 0px＆＃34;。您显然意识到它不是一个数字，因为您稍后会调用parseInt。但那时：

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

我认为您正试图删除＆＃34; px＆＃34;来自marg的那个奇怪的slice电话。我确定你在某处混淆了参数。为什么不马上调用parseInt？

第4阶段

阅读Smooth javascript animation后，我从openSite函数中分离出move函数，以避免重复调用getElementById等。

第5阶段

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

第6阶段

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

最终分数

我已将此版本上传到http://selfstudy-online.co.uk/js/animation.html。如果它能回答您的一些问题或至少让您走上正轨，请告诉我。我不满意我的版本的顺畅性，这似乎是你的问题的关键要素。目前还不完全清楚最终的外观和感觉是如何起作用的，因为我没有背景图像的副本。你有第一次尝试上传的版本吗？

Javascript顺利移动div并让另一个出现

1 个答案:

错误