0

Asensor.js に慣れるためにこの非常に小さなプロジェクトを開始しましたが、機能させることができません。

私のプロジェクト ディレクトリには、html ファイル (以下を参照) と、対応するプラグインであるはずの 5 つの JavaScript ファイルがあります (これらのファイルに未加工のコードをコピーして貼り付けました)。JavaScript ファイルは、JQuery、Ascensor.js、移行プラグイン、イージング プラグイン、および scrollTo プラグインです。

html ファイルは次のとおりです。

<!DOCTYPE html>
<html>
<head><title>Ascensor</title></head>
<script src="http://kirkas.ch/ascensor/js/libs/modernizr-2.5.3.min.js"></script>
<body>



<!-- HTML -->


<nav id="navigationMap">
    <ul>
        <li><a class="ascensorLink ascensorLink1 ascensorLinkActive">floor1</a></li>
        <li><a class="ascensorLink ascensorLink2">floor2</a></li>
    </ul>
</nav>

<div id="ascensorBuilding" style="position: absolute; width: 1436px; height: 100%;">

    <section class="ascensorFloor" id='ascensorFloor1' style="position: absolute; width: 1436px; height: 100%; left: 0px;">
        <p>floor 1 content here</p>
    </section>

    <section class="ascensorFloor" id='ascensorFloor2' style="position: absolute; width: 1436px; height: 100%; left: 1436px;">
        <p>floor 2 content here</p>
    </section>

</div>



<!-- ascensor.js -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ascensor.js"></script>
<script type="text/javascript" src="js/migrate.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/scrollTo.js"></script>


<script type="text/javascript">

  $(document).ready(function() {
    $('#ascensorBuilding').ascensor();

</script>



<!-- CSS -->

<style type="text/css">
    #ascensorFloor1 {
        background: red;
    }
    #ascensorFloor2 {
        background: blue;
    }
</style>



</body>
</html>

ブラウザで html ファイルを開くと、すべての静的コンテンツが表示されますが、navbar リンクをクリックしても何も動きません。

これを修正する方法はありますか？ありがとうございました！

4

2 に答える 2

0

このスクリプトを実装して、まだ重大な問題が発生しているようですが、scrollto.js が欠落していることがわかったので、後でそれを行いますが、$('#ascensorBuilding').ascensor();. ..

フロアに名前を付けたい場合は、次の行を記述します。

$('#ascensorBuilding').ascensor({AscensorFloorName:"Home | Implementation | HTML | Jquery | CSS | Smartphone | End"});

これが少し役立つことを願っています。Ascensor.js の github ページにあるサンプル ページのコードを調べてみてください。

また、コードを完全に理解しようとし、それについてブログ投稿を書くことにも注意してください:)

幸運を！

于 2013-05-14T09:22:39.603 に答える
0

js の実行後に絶対配置要素をコピーして貼り付けました。代わりにこれを試してください

    <!DOCTYPE html>
<html>
<head><title>Ascensor</title></head>
<script src="http://kirkas.ch/ascensor/js/libs/modernizr-2.5.3.min.js"></script>
<body>



<!-- HTML -->


<nav id="navigationMap">
    <ul>
        <li><a class="ascensorLink ascensorLink1"></a></li>
        <li><a class="ascensorLink ascensorLink2"></a></li>
    </ul>
</nav>

<div id="ascensorBuilding">
    <section>
       <p>floor 1 content here</p>
    </section>

    <section>
       <p>floor 2 content here</p>
    </section>
</div>



<!-- ascensor.js -->

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ascensor.js"></script>
<script type="text/javascript" src="js/migrate.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/scrollTo.js"></script>


<script type="text/javascript">

  $(document).ready(function() {
    $('#ascensorBuilding').ascensor();
});
</script>



<!-- CSS -->

<style type="text/css">
    #ascensorFloor1 {
        background: red;
    }
    #ascensorFloor2 {
        background: blue;
    }
</style>



</body>
</html>
于 2013-02-20T19:02:58.880 に答える