具有錨標記的JQuery超大型插件問題

Question

我目前正在將Supersized插件用於JQuery，並且遇到橫幅無法點擊的錨標記的問題。

我將Supersized附加到div標簽而不是body標簽上。

我將“ #supersized”和“ #supersized li”設置為絕對位置，以正確地包含在包含div中。 但是，當當錨鏈接不會覆蓋在圖像上，而是可以單擊的。 我嘗試將z-index增大到90。

我已經嘗試了所有我知道的東西，但是仍然無法正常工作。 我在錨標記周圍放置了一個邊框，它將圖像向下推，但是無法點擊。

的CSS

img { border:none; }

#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../img/progress.gif) no-repeat center center;}

  #supersized {  display:block; position:absolute; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
  #supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
  #supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
  #supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }         /*Quality*/

  #supersized li { display:block; list-style:none; z-index:-30; position:absolute; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
  #supersized a { width:100%; height:100%; display:block; }
     #supersized li.prevslide { z-index:-20; }
     #supersized li.activeslide { z-index:-10; }
     #supersized li.image-loading { background:#111 url(../img/progress.gif) no-repeat center center; width:100%; height:100%; }
        #supersized li.image-loading img{ visibility:hidden; }
     #supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }

的JavaScript

<script type="text/javascript">

     jQuery(function($){

        $.supersized({

           // Functionality
           slide_interval           :   3000,      // Length between transitions
           transition                 :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
           transition_speed      :   700,      // Speed of transition

           // Options
           fit_always                 :    0,
           fit_portrait                 :    0,
           horizontal_center     :    1,
           slide_links                :    'blank',   // Individual links for each slide (Options: false, 'number', 'name', 'blank')
           vertical_center         :    1,

           slides  :     [ 
                       {image : 'images/homepageBanners/banner1.jpg', title : 'Banner 1', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner2.jpg', title : 'Banner 2', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner3.jpg', title : 'Banner 3', url : "http://www.yahoo.com"},
                       {image : 'images/homepageBanners/banner4.jpg', title : 'Banner 4', url : "http://www.yahoo.com"}
                    ]
        });
      });

</script>

HTML是頁面包裝中包含的簡單div標簽。 我更改了Supersized滑塊的輸出，以便將其附加到div標簽而不是body標簽。

<div id="HomePageBanners"></div>

加大號中的javascript已更改為追加到上述div標簽：

$(document).ready(function() {
     $('#HomePageBanners').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');
});

Answer 1

好的，您的代碼有2件事情出錯，首先您在#supersized上有一個瘋狂的負z索引，它#supersized自動將其中的所有內容#supersized底部...

相反，您要執行的操作是#supersized具有適度的z-index，然后需要超出該值的所有內容都會稍高一點...否則該鏈接將被body等標准元素阻止...

其次， visibility:hidden確保鏈接不可見，並且也會阻止href ... afaik。

使用以下示例區域中的工作鏈接對以下代碼，css和js進行了調整：左下角http://jsfiddle.net/sg3s/daeL3/

作為獎勵，這里介紹了我如何調試它：如果在firefox / firebug或chrome中使用元素檢查器，則可以直接單擊的第一個元素將是頂部元素。 因此，使用該鏈接，我可以確定主體正在阻止鏈接。 其次，由於我無法直接看到該鏈接，因此在其中添加了一些文本...影響不大，因此我選擇了該鏈接，並逐步解決了其樣式，所有父母消除了會阻塞鏈接顯示的內容，將其范圍縮小到visibility: hidden

另外，在末端剪下的小js只是確保您單擊的內容是您認為的真實內容的另一種方法...