流体图像翻转 Twitter Bootstrap Rails

Question

我已经开始为我正在开发的 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 */

Answer 1

Bootstrap 使用媒体查询来调整 span8 的大小。因此，我们需要重新排列 html 以在 span8 中包含悬停元素，然后使用尺寸百分比来保持相对于照片的纵横比。

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;
}

Answer 2

我不是前端专家，但您遇到的问题可能是由于事件侦听器在调整大小时被引导程序的 JS 清除所致。出于某种原因，DOM 元素的行为就像它们在某些类型的转换下被销毁和重新创建一样，这意味着您的回调将消失。

以前解决这个问题的方法是使用.live()，但显然是deprecated。看起来.on() 是你想要的。不过也有一些注意事项！

委托事件的优点是它们可以处理来自以后添加到文档的后代元素的事件。通过选择在附加委托事件处理程序时保证存在的元素，您可以使用委托事件来避免频繁附加和删除事件处理程序的需要。

source

这意味着您需要确保将事件附加到一个容器，该容器保证不会以清除事件侦听器的方式进行操作，但理想情况下，它应尽可能靠近 DOM 层次结构。如果还没有一个，只需用一个 div 包围图像就可以做到这一点。