如何调整JavaScript鱼眼脚本's放大触发器

How do I tweak the JavaScript Fisheye script's enlargement trigger?

本文关键字:触发器 放大 脚本 鱼眼 何调整 调整 JavaScript      更新时间:2023-09-26

我在我的网站(链接到我的网站)中使用jQuery Fisheye插件(此处)。正如你所看到的,有9个"气泡",当你在其中一个上移动鼠标时,它将被放大。

有没有可能将其中一个"气泡"的最大尺寸作为默认值,所以当访问者加载页面时,他会看到8个小气泡和一个"最大尺寸"气泡?

编辑:我尝试添加一个新的css"类"来获得"大气泡"效果。现在的问题是(正如你在上面的链接中看到的),大气泡似乎在左边的小气泡之上。

我尝试将marginpadding添加到大气泡样式中,但没有帮助,我想是因为所有的小气泡都是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;
}

当鼠标靠近(而不是超过)时,项目开始调整大小,我认为这是基于鼠标位置。由于您无法使用javascript移动鼠标光标,我认为您无法触发此操作。

是时候找到另一种方法了,比如在CSS中设置大元素的比例。如果你打开Firebug(或另一个检查器)并观察元素,你会看到随着鼠标越来越近,左边和宽度都在变化。选择一些值并通过CSS进行设置。