Question

我需要创建一个基于jQuery的轮播。将鼠标悬停在旋转木马项目上时，应在其上方显示一个相关的弹出窗口。

此弹出窗口div需要定位在旋转木马包装器外部，但仍保持沿着悬索式旋转木马项目上方的x轴位置。因此，我将popup div放在carousel项目中，因此它可以绝对定位CSS中的minus top属性，但相对于轮播项目。

我遇到了一个问题，其中overflow：hidden需要应用于轮播，因此它不会在页面加载时显示所有轮播项目，但是当它需要在悬停时显示时会切断弹出div。

在旋转木马包装器上的CSS中我尝试使用以下内容，但这没有用，它最终表现得像溢出：隐藏

overflow-x: hidden;
overflow-y: auto;

或

overflow-x: hidden;
overflow-y: visible;

我提供了一个使用caroufredsel插件的JSFiddle示例。在这个例子中，我使示例popup div始终可见，而不是为了清晰起见而悬停。你可以看到文字，红色div的顶部被切断了。

http://jsfiddle.net/melon/jRp2r/9/

我想到的一个解决方案是在旋转木马包装器外面标记弹出div，这样可以解决它被切断的问题。但问题在于找出相对于悬停的旋转木马项目位置/显示位置以及哪个项目正在悬停的问题。在我走这条路之前，我想看看是否还有其他想法，也许是更好的想法。

如果有人能给我任何方向来实现我已经概述的目标，无论是通过CSS还是一些定制的JS都会很棒。

感谢您的期待。

更新：

接受的解决方案意味着如果轮播位于页面中间，则滚动页面时弹出div不会沿Y轴保持在相同位置。

我用接受的答案合并了我的初始解决方案。我在旋转木马外面创建了一个单独的div，我将用悬停的旋转木马项目的弹出HTML填充它。然后我会使用Jquery来绝对重新定位它。以下代码示例解决了我的问题，例如：

$('.carousel_item').mouseenter(function() {
   var $this = $(this);
   var posLeft = ($this.offset().left);
   var posTop = ($this.offset().top);

   //Pop up height
   var popHeight = ($('.popup', this).height());

   //Turn into negative number
   posTop = Math.abs(popHeight) * -1;;

   var popup_html = $('.popup', $this).html();

   $('#outside_popup').html(popup_html).css({
       top: posTop,
       left: posLeft
   }).fadeIn('fast');

}).mouseleave(function() {
     $('#outside_popup').fadeOut('fast');
});

Answer 1

我自己必须做类似的事情。我相信这里有人会想出一个更好的解决方案，但这就是我的方法：

使用幻灯片嵌套弹出窗口：

<div class="slide">
    <div class="slide_content"></div>
    <div class="popup">Hello!</div>            
</div>

鼠标悬停时，获取幻灯片的位置。设置弹出窗口相对于悬停幻灯片的位置。 position: fixed;是关键所在。然后让它出现：

$('.slide').mouseenter(function() {
    var $this = $(this);
    var posLeft = ($this.offset().left)-10
    var posTop = ($this.offset().top)-10
    $('.popup', $this).css({
                            position: 'fixed',
                            top: posTop,
                            left: posLeft
                           }).fadeIn('fast');

    }).mouseleave(function() {
        $('.popup', this).fadeOut('fast');
    });

Click here for a VERY basic example 在IE7-9，Firefox，Chrome中进行了测试

编辑：Here is a working example of your code

带有overflow-y的jQuery轮播，用于显示容器外的弹出窗口

1 个答案: