Question

我必须为我的客户制作一个单页网站，Ascensor.js插件似乎可以做我需要做的一切。但是，我不能让我的生活得以发挥作用。

最初我试图让它在WordPress主题中工作，但我放弃并试图让它像网站上的例子一样工作，没有快乐。

继承代码;

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="./js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="./js/jquery.ascensor.js"></script>  
<script type="text/javascript" src="./js/jquery.scrollTo-min.js"></script>

</head>

<body>

<script>

$('#ascensorBuilding').ascensor({
AscensorName:'ascensor',
ChildType:'section',
AscensorFloorName:'Home | Implementation | HTML',
Time:1000,
WindowsOn:1,
Direction:'chocolate',
AscensorMap:'2|1 & 2|2 & 3|2',
Easing:'easeInOutQuad',
KeyNavigation:true,
Queued:false,

});

</script>

<div id="ascensorBuilding">
    <section>
        <article class="container_12">
            <h1>Home</h1>
        </article>
    </section>

    <section>
        <article class="container_12">
            <h1>About</h1>
        </article>
    </section>

    <section>
        <article class="container_12">
            <h1>Contact</h1>
        </article>
    </section>
</div>
</body>
</html>

这确实应该正常工作，因为我完全按照这个例子。我已经尝试过有没有文章元素的类（我认为插件应该创建这些）。有没有人有这个插件的经验可以给我一些帮助？

提前致谢！

Answer 1

首先，您需要使用jQuery.ready

包装代码

$(function(){
    $('#ascensorBuilding').ascensor({
        AscensorName:'ascensor',
        ChildType:'section',
        AscensorFloorName:'Home | Implementation | HTML',
        Time:1000,
        WindowsOn:1,
        Direction:'chocolate',
        AscensorMap:'2|1 & 2|2 & 3|2',
        Easing:'easeInOutQuad',
        KeyNavigation:true,
        Queued:false,
    });
});

您缺少migration plugin和easing plugin。

演示：Fiddle

Answer 2

我要离开这里一项简单的工作，我正在使用提升者。随意获取您想要的所有代码。只需记住将“overflow：auto”设置为css中的“section”标签，并将“overflow：hidden”设置为您用于建筑物的div，在我的情况下为#house。

http://www.thegrowth.eu/mari/index.php

我正在使用的插件版本不适用于当前的jQuery版本，除非您破解代码。坚持1.8.3版，你可以从我的网站上获取它。此外，除了jQuery-UI之外，您还需要其他一些功能来使用提升者的缓动功能等。

原谅我的英语：p

Ascensor.js不工作？

2 个答案: