下一个和上一个按键 Jquery

Posted 2023-02-25

【中文标题】下一个和上一个按键 Jquery

【英文标题】：Next and Previous keypress Jquery

【发布时间】：2011-08-07 03:25:14

【问题描述】：

您好，当按下键盘上的下一个和上一个箭头键时，我想让我的页面滚动到某些 div。我希望它专门转到类名为“slider-panel”的下一个或上一个 div。这是我的 html 和 jquery：

$(document).ready(function () 

    $(".port-link-container").click(function () 
    $("div.slider-panel").slideUp("slow");
    );

    $("#wr").click(function () 
        $('html, body').animate( scrollTop: 450 , 'slow');
        $("div#wr-large").slideDown("slow");
    );

    $("#sema").click(function () 
        $('html, body').animate( scrollTop: 450 , 'slow');
        $("div#sema-large").slideDown("slow");
    );

    $(document).keyup(function (e) 
        if (e.keyCode == 27)
            $("div.slider-panel").slideUp();
            $('html, body').animate( scrollTop: 0 , 'slow');
        );

    $(".slider-close").click(function () 
        $('html, body').animate( scrollTop: 0 , 'slow');
        $("div.slider-panel").slideUp("slow");
    );
);

<div class="toppanel">
    <div id="wr-large" class="slider-panel">
         <div class="slider-content clearfix">
            <div style="width: 1000px; margin: 0 auto;">
                <div class="slider-close"></div>
                <div class="clear"></div>
                <div class="wr-large"></div>
                <div class="slider-close"></div>
            </div>
        </div>  
    </div>
    <div id="sema-large" class="slider-panel">
        <div class="slider-content clearfix">
            <div style="width: 1000px; margin: 0 auto;">
                <div class="sema-large"></div>
                <div class="slider-close"></div>
            </div>
        </div>  
    </div>
</div>

【问题讨论】：

你说的是左右方向键吗？

是的，我希望它使用箭头键转到具有“slider-panel”类的下一个 div

你能在jsfiddle.net上创建一个演示吗？我似乎看不到发生了什么。

【参考方案1】：

您是在问为什么您当前的代码不起作用，还是在寻求帮助在现有脚本之上实现您的功能？现在你的 keyUp 函数只在寻找 ESC 键 (27)：

http://www.webonweboff.com/tips/js/event_key_codes.aspx

如果我要实现这个，我会检查下一个/上一个键，然后找出我想要“聚焦”的 div。我将获得该 div 的全局 x/y 位置，然后滚动到这些位置。

我知道这有点含糊，但如果您需要代码示例方面的帮助，请告诉我。

【讨论】：

是的，我喜欢在 esc 命令之上添加下一个/上一个键。这是指向该站点的链接，它包含在norkenguitars.com/new/portfolio.htm 中。当您单击其中一个灰色图标时，滑块会下降，id 喜欢使用键盘上的下一个/上一个箭头来浏览此滑块中的图像，而不必关闭和打开每个图像。示例代码会很有帮助

如果你能提供这个例子，那将非常有帮助