Ascensor.js非常基本實現

我爲了熟悉Asensor.js開始這個非常小的項目，但我不能使它發揮作用。Ascensor.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文件，但是當我點擊導航欄鏈接，沒有任何移動。

任何想法如何解決這個問題？謝謝！

來源

2013-02-20 blrsk

複製和絕對定位的元素粘貼的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-20 19:02:58

我取代我的HTML與你提出什麼，結果是除了我失去所有的CSS屬性一樣。也許我不清楚你的解決方案。你能告訴我更多嗎？ – blrsk 2013-02-20 19:25:29

@blrsk我已經修改了代碼，以顯示完整的HTML，你可以複製和粘貼 – 2013-02-20 20:26:01

謝謝！我只是試過你的代碼，但我得到了相同的結果。我可能會在正確導入js庫時遇到問題。你怎麼看？ – blrsk 2013-02-20 20:36:15

看我仍然有嚴重的問題，實施這個腳本，但是從我的理解，我很想念scrollto.js，這樣以後我會做，但對你來說，你可能想在$('#ascensorBuilding').ascensor();括號之間添加你的選擇......

意味着，如果你希望把你的地板，你寫的下一行：

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

我希望這有助於一點，嘗試學習示例頁面的代碼在the github page of Ascensor.js

另請注意，我會盡量充分理解的代碼，它:)

好運會寫一篇博客文章！

來源

2013-05-14 09:22:39

Ascensor.js非常基本實現

回答

相關問題