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ください。そうしないと、それらはグローバル変数になります。関数の先頭で、カンマ区切りの 1 つのステートメントですべて宣言します。そうしない場合でも、宣言は関数の先頭に引き上げられるため、最初に宣言を配置して、コードをできるだけ読みやすくすることをお勧めします。

命名規則:

OpenSiteコンストラクターではない関数なので、キャメルケースにする必要があります。 openSite

のような変数も変更intmargしましたintMarg。彼らはとても読みやすいです。

ステージ 2

マークアップをスクリプトから分離する

あなたが JavaScript から始めたばかりであることは承知していますが、良い部分 (Doug Crockford の本を参照) とベスト プラクティスから始めることをお勧めします。JavaScript コードを別のファイルに入れます。

元のページを次の 2 つのファイルに分割しました: animation.html animation.js

javascript を html 要素に埋め込むことはお勧めできません。通常、イベント リスナーを要素にプログラムで追加します。ただし、YAHOO の YUI や jQuery などのよく知られたライブラリのいずれかを使用していないため、プログラムでイベント ハンドラーを追加することはあまり複雑になりたくありません。

href 属性を使用する代わりに、各メニュー項目の onclick イベントにイベント ハンドラーを追加すると、より明確になると思います。JavaScript プロトコルを使用することはお勧めできません。詳細は思い出せませんが、セキュリティ上のリスクだと思います。

そのため、onclick イベントにハンドラーを追加して、メニュー項目を変更します。メニュー項目の上にカーソルを置いたときにポインター カーソルが表示されるように css を変更します。色:継承; カーソル:ポインター; }

何が起こっているのかを簡単に確認できるように、他のいくつかの css の詳細を変更しました。

ステージ3

赤ちゃんの一歩を踏み出します。OpenSite 関数内のすべてをコメント アウトし、一度に 1 行ずつ追加します。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

Smooth javascript animationを読んだ後、繰り返し呼び出されるのを避けるためにopenSite、関数を関数から分離しました。movegetElementById

ステージ5

setTimeout の間隔を短くして、値をいじりました。ミリ秒ごとに呼び出すmoveのはぎこちなく感じられ、24 ミリ秒ごとに呼び出すのが最もスムーズでしたが、自分で試すことができます。

ステージ6

jQuery や YUI などの最新のフレームワークを真剣に使用することを検討してください。率直に言って、アニメーションは初心者プログラマー向けではなく、クロスブラウザーの無限の癖は経験豊富なプログラマー チームに任せるのが最善です。

最終ポイント

これのバージョンをhttp://selfstudy-online.co.uk/js/animation.htmlにアップロードしました。それがあなたの質問のいくつかに答えるか、少なくともあなたを正しい道に導くかどうか教えてください. 私のバージョンの滑らかさに満足していません。それがあなたの質問の重要な要素のようです. 背景画像のコピーがないため、最終的なルック アンド フィールがどのように機能するかは完全にはわかりません。最初の試みのどこかにアップロードされたバージョンがありますか?

于 2012-06-07T03:24:29.447 に答える