0

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

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

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

和JSFIDDLE 演示

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>
4

1 回答 1

0

你的代码看起来不错。.

这是您的代码的JSFiddle .. 我只更改了图片 URL

如果你的意思是

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

其他图像在演示中似乎没有下降，但在你的情况下下降了......

你有错误的菜单样式

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

正确的是

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

这是更正的演示

于 2013-05-16T16:46:28.010 回答