1

Ascensor JQuery プラグインを使用して単一ページのスクロール Web サイトを構築しようとしていますが、正しくセットアップするのに苦労しています。http://kirkas.ch/ascensor/のドキュメントは役に立ちますが、まだ何かが足りないに違いありません。私が欲しいのは、上から下までのシンプルな 3 階建てのレイアウトです。「建物」のレイアウトは正しく生成されているようですが、「レベル」間を移動できません。矢印キーと私のリンクはページをまったく動かしません。私のコードについて少し助けてもらえますか? 任意のガイダンスをいただければ幸いです。

ありがとう、ブレット

<!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=UTF-8" />
<title>Ascensor Test</title>
<script src="jquery-1.9.1.js"></script>
<script src="jquery.scrollTo-1.4.3.1.js"></script>
<script src="jquery.ascensor.js"></script>
<script src="jquery.easing.1.3.js"></script>
<script>
$(document).ready(function()
{
    $('#house').ascensor(
    {
        AscensorName:'ascensor',
        ChildType:'div',
        AscensorFloorName:'Home | Implementation | HTML',
        Time:1000,
        Easing:'easeInOutCubic',
        WindowsOn:1,
        Direction:'y',
        AscensorMap:'1|1 & 2|1 & 3|1',
        KeyNavigation: true,
        Queued:false,
        QueuedDirection:"x"
    });
});
</script>

<style>
body
{
    margin: 0;
    padding: 0;
}

#house
{
    overflow: hidden;
    border: 5px solid black;
}

#navigation
{
    z-index: 1000;
    position: fixed;
    top: 50px;
    left: 50px;
}

#ascensorFloor1
{
    background-color: orange;
}
</style>

</head>

<body>

    <div id="navigation">
        <a href="#" class="ascensorLink ascensorLink1">Floor 1</a>
        <a href="#" class="ascensorLink ascensorLink2">Floor 2</a>
        <a href="#" class="ascensorLink ascensorLink3">Floor 3</a>
    </div>

    <div id="house">
        <div>
            Floor 1
        </div>
        <div>
            Floor 2
        </div>
        <div>
            Floor 3
        </div>
    </div>

</body>
</html>
4

3 に答える 3

0

問題はあなたではなく、「jquery-1.9.1.js」にあります。私は ascensor を自分で実装しようとしましたが、問題はプラグインが jQuery からの最後の更新で動作しないことであると考えました。バージョンはもともと 1.5.1 を使用していました。Git の jQuery を確認してください ( https://github.com/seekvence/ascensor )。原因を調べてみましたが、原因がわかりません! jQuery 移行プラグインを使用しようとしましたが、うまくいきませんでした。

于 2013-04-16T12:25:20.370 に答える
0

ID を生成しているのはプラグインであるため、問題は ID ではありません。したがって、そもそもそれらをマークアップに入れるべきではありません。私はあなたと同じ問題を抱えていました.「オン/オフの切り替え」を何度も経験した後、問題はキーナビゲーション宣言にあることがわかりました. false にすると、機能し始めます。理由は聞かないでください。「KeyNavigation:false」を指定すると、プラグインが機能します。キー ナビゲーションはプラグインで気に入った機能の 1 つなので、これは残念です。

于 2013-04-14T19:13:40.347 に答える
0

イージング:'easeInOutCubic' - 動作しません

削除: Easing:'easeInOutCubic',

または: イージング:'linear', ..))

于 2013-04-23T13:08:53.233 に答える