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

Question

我在我的網站（ 鏈接到我的網站 ）中使用jQuery Fisheye插件（ 在此處 ）。 如您所見，有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進行設置。