当前位置：文江博客话题详情

创建像 RDP 菜单栏一样的 jquery 下拉菜单

发布于 2024-08-26 14:28:55 字数 157 浏览 5 评论 0原文

我不太熟悉 jquery 所以我不太确定如何做到这一点。基本上，我希望一个 html 块隐藏在页面顶部，并伸出约 3px 的边缘（鼠标悬停的东西），当您将鼠标悬停在它上面时，隐藏的部分会向下滑动。

基本上我希望它像 RDP 全屏菜单栏一样工作。关于这样做的最佳方法是什么有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃扇骨 2024-09-02 14:28:55

jquery:

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

样式:

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html:

<div id="slide">
test<br>
test<br>
test<br>
test
</div>

jquery:

$("#slide").bind("mouseover", function() {
     $(this).animate({
          top: '+=189'                      
     });
}).bind("mouseout", function() {
     $(this).animate({
          top: '-=189'                      
     });
});

style:

   <style type="text/css">
   #slide {
     background:#ccc;
     border:1px solid #000;
     width:200px;
     height:200px;
     padding:10px;
     position:absolute;
     top:-190px;
     }
  </style>

html:

<div id="slide">
test<br>
test<br>
test<br>
test
</div>

回复收藏 0 原文

离去的眼神 2024-09-02 14:28:55

您应该能够在 Jquery UI

http://jqueryui.com/demos/hide/ 的帮助下完成此操作
在下拉菜单中选择幻灯片。

回复收藏 0 原文

浸婚纱 2024-09-02 14:28:55

感谢您的回复。通过对上面的代码进行一些调整，我发现了上面的 .hover() 方法。上面的 javascript 看起来像

$("#slide").hover(function () {
            $(this).animate({
                top: '+=30'
            });
        }, function () {
            $(this).animate({
                top: '-=30'
            });
        });

Thanks for the responses. With a little tweaking of the above code I found out above the .hover() method. The above javascript would then look like

$("#slide").hover(function () {
            $(this).animate({
                top: '+=30'
            });
        }, function () {
            $(this).animate({
                top: '-=30'
            });
        });

回复收藏 0 原文

~没有更多了~