2

これがコードjsFiddleです。

新しい（現代の）画像と古い画像の2つの画像があります。私の例では、「ここをクリックして下にスライド」リンクを押すと、すべてが適切に下にスライドします（ただし、画像を引き伸ばして互いに合わせるようにしませんでしたが、これは単なる例です）。

しかし、新しい画像（モダン）が下にスライドせず、古い画像（古いGoogleによる）にスムーズに置き換えられるようにしたいと思います。たとえば、スライダーがページの中央にある場合、古いGoogleの半分がそのスライダーの上に表示され、現在のGoogleの半分がそのスライダーの上に表示されなくなります。その瞬間、現代の画像の下部はまだスライダーの下にあります。その結果、画像に同じテキストが含まれ、互いにフィットしているが、色が異なる場合は、スライドするときにいつでもその画像からテキスト全体を読み取ることができます。きちんと説明できたらいいなと思います。

4

2 に答える 2

2

これがあなたが望むものです。

背景画像は元の位置にとどまる必要があるため、divはページの下部に揃えられます。

http://jsfiddle.net/uniisland/9h58G/1/

于 2012-08-13T07:26:17.583 に答える
0

解決策かどうかはわかりませんが、次のようになります。

本体のcssをdivでラップしました：

<div id="bg"></div>

#bg{
     height: 100%;
     width: 100%;
     background-color: #d1e3ec;
     background-image: url(http://googlechrometutorial.com/images/google-chrome-home.jpg);
     background-repeat: no-repeat;
     background-position: top center;
     position: absolute;
}

その後、アニメーションの不透明度（または他のフェード...）でパリーすることができます：

 $('#bg').css('opacity', 0);
 $('#slide-link').click(function(){

 var hid = $('#sliderWrapper').is(':hidden')            
 $(this).animate({ top: (1-hid)*($(window).height()) },1500)
      if(hid) {
           $('#bg').animate({'opacity':0}, 1000);
           $('#sliderWrapper').stop().show("slide", { direction:"down" }, 1500);
      } else {
           $('#bg').animate({'opacity':1}, 1000);                                
           $('#sliderWrapper').stop().hide("slide", { direction:"down" }, 1500); 
      }          
 })
于 2012-08-13T08:07:40.833 に答える