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的JS清除。出于某种原因，DOM元素就像在某些类型的转换中被破坏和重新创建一样，这意味着你的回调会消失。

解决此问题的方法曾经是使用.live()，但这显然是deprecated。看起来像.on()就是你想要的。但是有一些警告！

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

source

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

Answer 2

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

流体图像翻转Twitter Bootstrap Rails

2 个答案: