弹性缩略图菜单- css不使图像的底部粘

Elastic Thumbnail menu - css not making bottom of images stick

本文关键字：图像 底部 css 略图 菜单      更新时间：2023-09-26

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

我已经实现了没有问题，但对我来说，css似乎不能确保图像粘在相同的水平，就像他们应该在给定的演示示例。

这意味着当我将鼠标悬停在图像上时，它会放大，所有其他图像也会随之移动。我想让它像演示一样工作，更像一个苹果坞类型的动画。请参阅下面的代码:

和JSFIDDLE DEMO

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>

你的代码看起来不错。

这里是JSFiddle为您的代码。我更改了Nothing but Image URLS

如果你指的是

我想让它像演示一样工作，更像一个"苹果坞"类型的动画。CSS似乎没有像在给定的演示中那样确保图像粘在同一水平面上

其他图像在DEMO中似乎没有下降，但在你的情况下下降…

你的菜单样式不对

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

正确是

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

这里是更正DEMO

相关文章：