reveal.js框架+javascript箭头

reveal.js framework + javascript arrows

本文关键字：箭头 +javascript 框架 js reveal      更新时间：2024-03-31

我使用的是reveal.js框架，它可以将网站变成一个全页面的水平网站。

我正在尝试编写一些javascript来响应向左导航和向右导航箭头的点击。

我发现reveal.js类名navigate-right.enabled适用于右边，navigate-left适用于左边。然而，它只响应桌面上箭头的点击，不适用于手机上的点击或滑动，也不适用于桌面上的按键、触控板滑动（reveal.js框架支持）。

下面是一个简单的例子（鼠标滚动或手机滑动查看不起作用）：http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-12-13/reveal-arrows-clean.html

<script type="text/javascript">
    $(document).ready(function(){
            // RIGHT ARROW 
            $(".navigate-right.enabled").click(function(){
                $('#side-column-textbox').animate({top: "-=300px"}, 1020);
                })  
            // LEFT ARROW 
            $(".navigate-left").click(function(){
                $('#side-column-textbox').animate({top: "+=300px"}, 1020);
                })      
    })
</script>

我尝试了很多不同的解决方案，但都没有成功，所以任何帮助都会很棒！！

-感谢

当我了解addEventListener函数时，我取得了一些进展我确实不得不设置一个不同的事件名称，尽管功能相同，这让它有点混乱。请在此处查看演示：http://chrisriesner.com/DT_web-experiments/DT-reveal-arrows-11-18-13/reveal-arrows-addevents.html#/

        <section >
            <h2>PAGE 0</h2>
        </section >

        <section data-state="data-event-textbox">
            <h2>PAGE 1</h2>
        </section>

        <section data-state="data-event-textbox1">
            <h2>PAGE 2</h2 >
        </section>

        <section data-state="data-event-textbox2">
            <h2>PAGE 3</h2>
        </section>

<script>
    document.addEventListener('data-event-textbox', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);
    });
    document.addEventListener('data-event-textbox1', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);
    });
    document.addEventListener('data-event-textbox2', function(){
        $('#side-column-textbox').animate({top: "-=84%"}, 1020);
    })
</script>

这让鼠标滚动和手机滑动与我的.animate一起工作！然而，我现在的问题是，当向左滑动或向左点击时，功能应该是动画+=84%，而不是-=84%的

有没有想过如何在向左滑动/点击时触发幻灯片，这样我就可以用相反的方式制作动画？

相关文章：