Question

我发现了一种快速简单的动画技术，可以添加到我的缩略图库中，技术在这里http://buildinternet.com/2009/09/sproing-make-an-elastic-thumbnail-menu/

我已经实现了没有问题但是对我来说，css似乎并不能确保图像像在给定的演示示例中那样保持在同一级别上。

这意味着当我将鼠标悬停在图像上并放大时，其他所有图像都会移动。我希望它像演示一样工作，它更像是一个'apple-dock'类型的动画。请参阅以下代码：

JS

<script type="text/javascript">
   $(document).ready(function(){
     $('.menuitem img').animate({width: 155}, 0);
     $('.menuitem').mouseover(function(){
       gridimage = $(this).find('img');
       gridimage.stop().animate({width: 200}, 500);
     }).mouseout(function(){
       gridimage.stop().animate({width: 155}, 300);
     });
  }); 
</script>

CSS

#menuwrapper{ 
   position:relative;
   height:210px;  
}  
#menu{
  position:absolute;
  bottombottom:0;
}  
.menuitem{ 
  position:fixed relative;
  bottom:0px; 
  display:inline-block; 
}  
img { 
  -ms-interpolation-mode: bicubic; 
}

HTML

<div id="menuwrapper">  
<div id="menu">  
  <a href="/interactive/cis/PaycoCISBrochure.html" class="menuitem">
    <img   class="interactive_img" src="/images/Payco-CIS-interactive.png">
  </a><!--Template for each menu item-->  
  <a href="/interactive/PU/PaycoUmbrellaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Umbrella-interactive.png">
  </a>
  <a href="/interactive/tech/PaycoTechBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Tech-interactive.png">
  </a>
  <a href="/interactive/media/PaycoMediaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Media-interactive.png">
  </a>
  <a href="/interactive/medical/PaycoMedicalBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Medical-interactive.png">
  </a>
  <a href="/interactive/logistics/PaycoLogisticsBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Payco-Logistics-interactive.png">
  </a>
  <a href="/interactive/SU/SimplyUmbrellaBrochure.html" class="menuitem">
    <img class="interactive_img" src="/images/Simply-Umbrella-interactive.png">
  </a>
</div>  
</div>

Answer 1

您的代码看起来不错。

以下代码为 JSFiddle ..我更改了图片网址

如果你的意思是

我希望它像演示一样工作，它更像是一个'apple-dock'类型的动画。 css似乎并不能确保图像像在给定的演示中那样保持在同一级别

其他图片似乎没有出现在DEMO中，而是在你的情况下继续......

你的菜单风格错误

 #menu{
  position:absolute;
  bottombottom:0;
}

正确

#menu{
  position:absolute;
  bottom:0;
}

这是 Corrected DEMO

弹性缩略图菜单 - 不会使图像底部粘住

1 个答案: