溢出y的jQuery旋轉木馬以顯示容器外的彈出框

我需要創建一個基於jQuery的旋轉木馬。將鼠標懸停在旋轉木馬項目上時，應該在其上方顯示一個相關的彈出窗口。溢出y的jQuery旋轉木馬以顯示容器外的彈出框

此彈出div需要定位到出現在輪播包裝外部，但仍然保持沿着X軸位於懸停的輪播項目之上的位置。因此，我將彈出式div放置在旋轉木馬項目中，以便它可以在CSS中相對於旋轉木馬項目被減去頂部屬性絕對定位。

我遇到了一個溢出問題：隱藏需要應用到傳送帶上，因此它不會顯示頁面加載時的所有傳送帶項目，但是這會在需要懸停時出現彈出窗口div 。

在轉盤上的包裝我已經使用以下嘗試了CSS，但是這並沒有奏效，它只是結束了表現得像溢出：隱藏

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

或

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

我有提供了一個使用caroufredsel插件的JSFiddle的例子。在這個例子中，爲了清楚起見，我已經讓示例popup div始終可見，而不是懸停。你可以看到文字，紅色的頂部被切斷。浮現在腦海

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

一個解決辦法，是讓彈出的div標記的傳送帶包裝這將解決它的問題被切斷之外。但是，隨後出現的問題是找出相對於懸停的旋轉木馬物品以及哪個物品被徘徊的位置/展示位置。我想看看是否有其他想法，也許在我走下這條道路之前有更好的想法。

如果有人可以給我任何方向來實現我已經概述的目標，無論是通過CSS或可能是一些自定義JS將是偉大的。

感謝您的期待。

UPDATE：

接受的解決方案意味着，如果傳送帶是在頁面的中間，在彈出的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'); 
});

來源

2012-11-07 melon

我必須自己做一次類似的事情。我敢肯定，在這裏有人會想出更好的解決方案，但是這是我去一下吧：

鳥巢的彈出與滑塊：

<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，火狐，Chrome

編輯：Here is a working example of your code

來源

2012-11-07 13:37:21 Turnip

感謝這一點，JS讓我在正確的道路。 – melon

溢出y的jQuery旋轉木馬以顯示容器外的彈出框

回答

相關問題