0

作業中の Rails アプリケーションのロールオーバー イメージ効果の作成を開始しました。私は twitter-bootstrap-rails gem を使用して、デバイス間でアプリケーションの見栄えを良くしています。私が現在の実装で抱えている問題は、ブラウザーのサイズを変更すると、画像がブラウザーの幅に合わせてサイズ変更されなくなり、ロールオーバー効果が画像の境界から外れることです。問題はクラスに起因すると思います.photoが、それを修正する方法がわからない、または目的の結果を実装するためのより良い方法があるかどうかはわかりませんか?

HTML

<% @photos.each do |photo| %>
<div class="photo row">
  <div class="span8 photo"><%= image_tag photo.image_url(:large).to_s %></div>
  <div class="span4 hover">
    <div class="bg"></div>
    <div class="description">
      <h4><%= link_to photo.title, photo_path(photo) %></h4>
      <hr>
      <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
    </div>
  </div>
</div>
<% end %>

CSS:

 .photo {
    position: relative;
    width: 770px;
  }

  .photo .hover {
    position: absolute;;
    height: 90.4%;
    left: 3.09%;
    top: 4.8%;
    width: 93.82%;
    display: none;
  }

  .photo .hover .bg {
    z-index: 1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: #FFF;
    -webkit-opacity: 0.8;
    -moz-opacity: 0.8;
    filter:alpha(opacity=80);
    opacity: 0.8;
  }

  .photo .hover .description {
    position: relative;
    text-align: center;
    top: 40%;
    z-index: 2;
  }

JS

jQuery(document).ready(function($) {


  $(".photo").mouseenter(function () {
      $(this).find('.hover').fadeIn(300);
  }).mouseleave(function (){ 
    $(this).find('.hover').stop(true, true).fadeOut(300);
  });

}); /* End Dom Ready */
4

2 に答える 2

0

私はフロントエンドの達人ではありませんが、サイズ変更が発生するたびにイベントリスナーがブートストラップの JS によってクリアされることが原因で問題が発生する可能性があります。何らかの理由で、DOM 要素は、特定の種類の変換の下で破棄され、再作成されたかのように動作します。これは、コールバックがなくなることを意味します。

これを修正する方法は、使用すること.live()でしたが、それは明らかに非推奨です。ここにあなたが欲しいものがあるように見え.on()ます。ただし、いくつか注意点があります！

委任されたイベントには、後でドキュメントに追加される子孫要素からのイベントを処理できるという利点があります。委任されたイベント ハンドラーがアタッチされたときに存在することが保証されている要素を選択することで、委任されたイベントを使用して、イベント ハンドラーを頻繁にアタッチおよび削除する必要がなくなります。

ソース

これは、イベントリスナーがクリアされるような方法で操作されないことが保証されているコンテナーにイベントをアタッチする必要があることを意味しますが、理想的には、DOM 階層にできるだけ近いものにする必要があります。まだ div が配置されていない場合は、画像を div で囲むだけでそれを行うことができます。

于 2012-12-30T09:47:12.477 に答える
0

Bootstrap はメディア クエリを使用して、span8 のサイズを変更します。そのため、span8 内に hover 要素を含めるように html を再配置し、寸法にパーセンテージを使用して、写真に対する縦横比を維持する必要があります。

HTML

<% @photos.each do |photo| %>
<div class="row">
  <div class="span8 photo">
    <%= image_tag photo.image_url.to_s %>
    <div class="hover">
      <div class="bg"></div>
      <div class="description">
        <h4><%= link_to photo.title, photo_path(photo) %></h4>
        <hr>
        <p><%= raw photo.tag_list.map { |t| link_to t, tag_path(t)}.join(' ') %></p>
      </div>
    </div>
  </div> 
</div>
<% end %>

CSS

.photo {
  position: relative;
}

.photo .hover {
  position: absolute;
  height: 90%;
  width: 94%;
  top: 0;
  left: 0;
  padding: 3%;
  display: none;
}

.photo .hover .bg {
  z-index: 1;
  position: relative;
  height: 100%;
  width: 100%;
  background: #FFF;
  -webkit-opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=80);
  opacity: 0.8;
}

.photo .hover .description {
  position: absolute;
  text-align: center;
  top: 40%;
  width: 94%;
  height: 90%;
  z-index: 2;
}
于 2013-01-05T06:28:43.697 に答える