0

サムネイル ギャラリーに追加する手早く簡単なアニメーション テクニックを見つけました。

私は問題なく実装しましたが、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>
4

1 に答える 1

0

あなたのコードはよさそうです。.

コードのJSFiddleは次のとおりです。変更したのは画像の URL だけです。

あなたが意味する場合

「アップルドック」タイプのアニメーションであるデモのように動作するようにしたい. css は、指定されたデモのように画像が同じレベルに固定されるようには見えません。

他の画像はDEMOではダウンしていないように見えますが、あなたの場合はダウンします...

あなたは間違ったメニュースタイルを持っています

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

正しいのは

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

ここに修正されたデモがあります

于 2013-05-16T16:46:28.010 に答える