如何调整 JavaScript Fisheye 脚本的放大触发器？

Posted 2023-02-25

【中文标题】如何调整 JavaScript Fisheye 脚本的放大触发器？

【英文标题】：How do I tweak the JavaScript Fisheye script's enlargement trigger?

【发布时间】：2012-02-24 16:55:36

【问题描述】：

我在我的网站 (link to my site) 中使用 jQuery Fisheye 插件 (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']; ?>"  /></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;

【参考方案1】：

当鼠标靠近（未结束）时，项目开始调整大小，我会说它基于鼠标位置。由于您无法使用 javascript 移动鼠标光标，因此我认为您无法触发此操作。

是时候寻找另一种方法了，例如在 CSS 中设置大元素的比例。如果您打开 Firebug（或其他检查器）并观察元素，您会看到当鼠标靠近时左侧和宽度正在发生变化。选择一些值并通过 CSS 设置它们。

【讨论】：

我遵循了你的想法，但后来卡住了（用新代码更新了我的问题）