如何調整JavaScript Fisheye腳本的放大觸發器？

Question

我在我的網站（link to my site）中使用jQuery魚眼插件（here）。 正如你所看到的那樣，有9個「氣泡」，當你在其中的一個上移動你的鼠標時，它會被放大。

是否有可能在默認情況下將其最大尺寸中的某個「氣泡」設爲 ，因此當訪問者加載頁面時，他會看到8個小氣泡和一個「最大尺寸」氣泡？

編輯： 我試圖爲「大泡」效果添加一個新的CSS「類」。 現在的問題是（正如你在上面的鏈接中看到的那樣），大泡泡看起來位於左小泡泡的頂部。

我嘗試添加margin和padding的大泡沫的風格，但它並沒有幫助， 我猜是因爲所有的小氣泡float:right。

我的HTML/PHP代碼：

<script type="text/javascript"> 

    $(document).ready(
     function() 
     { 
      $('#dock2').Fisheye(
       { 
        maxWidth: 150, 
        items: 'a', 
        itemsText: 'span', 
        container: '.dock-container2', 
        itemWidth: 80, 
        proximity: 80, 
        halign : 'center', 
        valign : 'bottom' 
       } 
      ) 


      $('#auto_big').addClass('dock-item2-big'); 

      $('.dock-item2').mouseover(function() { 
       $('#auto_big').removeClass('dock-item2-big'); 
      }); 
      $('.dock-item2').mouseout(function() { 
       $('#auto_big').addClass('dock-item2-big'); 
      }); 


     } 
    ); 

</script> 
    <div class="dock2" id="dock2"> 
    <div class="dock-container2"> 
<?php $categories = $this->requestAction('categories/index/direction:asc/limit:9'); ?> 
<?php foreach ($categories as $category): ?> 

    <?php 
     if($category['Category']['id'] == 27) 
      $special = " id='auto_big'"; 
     else 
      $special = ""; 
    ?> 

    <a class="dock-item2" href="/categories/show/<?=$category['Category']['id'];?>"<?=$special?>><span><img src='/img/cat/<?=$category['Category']['id'];?>_title.png'></span><img src="/img/cat/<?php echo $category['Category']['picture']; ?>" alt="<?php echo $category['Category']['name']; ?>" /></a> 
<?php endforeach; ?> 
    </div> 
</div> 

我的風格：

/* dock2 - bottom */ 
#dock2 { 
    width: 100%; 
    bottom: 0px; 
    position: relative; 
    left: 0px; 
} 
.dock-container2 { 
    position: absolute; 
    height: 50px; 
    /*background: url(images/dock-bg.gif);*/ 
    /*padding-left: 20px;*/ 
} 
a.dock-item2 { 
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif; 
    width: 40px; 
    color: #000; 
    bottom: 0px; 
    position: absolute; 
    text-align: center; 
    text-decoration: none; 
} 
.dock-item2 span { 
    display: none; 
    padding-left: 20px; 
    font-size:20px; 
    float:right; 

} 
.dock-item2 img { 
    border: none; 
    margin: 5px 10px 0px; 
    width: 100%; 
} 



a.dock-item2-big { 
    display: block; 
    font: bold 12px Arial, Helvetica, sans-serif; 
    width: 200px; 
    color: #000; 
    bottom: 0px; 
    position: absolute; 
} 
.dock-item2-big span { 
    display:block; 
    padding-left: 20px; 
    font-size:20px; 
    float:right; 

} 

.dock-item2-big img { 
    border: none; 
    width: 220px; 
} 

Answer 1

由於項目開始調整，當鼠標靠近（不超過），我會說這是基於鼠標位置。由於您無法使用javascript移動鼠標光標，我不認爲您可以觸發此操作。

找到其他方法的時間，比如在CSS中設置大元素的比例。如果您打開Firebug（或其他檢查員）並觀察元素，則會看到鼠標靠近時左側和寬度發生變化。選擇一些值並通過CSS設置它們。