0

2 つの DIV を互いに重ねて配置しようとしています。これにより、ポインターが画像の上に置かれると、上のものがフェードして下のものが表示されます。ここでこれを行いました：http://quaystreet.chrisloughnane.net/

写真がモバイルデバイスの水平幅に合わせて拡大縮小されるように、レスポンシブにしたいです。1 つの画像では問題ありませんが、下の DIV を再配置しようとするとすぐに壊れます。

http://jsfiddle.net/chrisloughnane/f2NdQ/4/

CSSだけでやりたいことはできますか？

<div id='old'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/></div>
<div id='new'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/></div>

img {
    max-width: 100%;
    display: block;
    margin: auto;
}
4

2 に答える 2

3

どうぞ、

実際の例

CSS:

.images {
    width: 100%;
    position: relative;
    max-width: 354px;
    margin: 0 auto;
}

.images img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 354px;
}

JavaScript:

 $(document).ready(function() {    
      $('.images').on('mouseenter', function(){
          $('.images .old').fadeOut(1000);
      }).on('mouseleave', function(){
          $('.images .old').fadeIn(1000);
      });
 });

HTML:

<div class="images">
    <img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg">
    <img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg">    
</div>

あなたが知っているいくつかのこと：

  1. 各 div を互いの前に配置するために、絶対位置を使用しています。
  2. divをフェードアウトさせるためにあなたがしたすべてのことを変更します。その方法はよりクリーンだと思います
  3. 絶対位置を使用するように HTML を変更します。
  4. img は幅 100% になり、max-width354pxは、img が使用する最大幅である必要がある任意の値にすることができます。したがって、 が 354px 未満の場合、div 全体を 100% 使用します。

編集：

ブラウザーのサポートを気にしない場合は、CSS3 トランジションを使用できます。IE<10 には注意してください。
これが遷移付きの答えです

于 2013-05-28T12:42:16.407 に答える