Question

在我的网站上，在每页的脚下，我有一组图像。该集合在7.5秒后逐渐消失到另一个集合。

问题是图像的宽度可能不同，我需要根据每个图像的宽度计算出每个集合中放置的图像数量。

我的网站总共有960像素宽，每张图片都需要有一个右边距，比如15像素。所以，如果我有7个图像的集合（假设集合中的最后一个图像没有右边距），我看的总宽度为870像素。

我可以检索每个图像的宽度，所以现在我需要一种方法将它们放在一个集合中，该集合有自己的div，我可以通过jQuery获取并淡入淡出。

以下代码适用于相同宽度的图像。

JS：

<% @logo_group_size = 7 %>
<script type="text/javascript">
  <% unless (@logos || Logo.order(:position)).empty? %>
    var logo_sets = [<%= (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).collect{|x| (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).index(x)}.join(', ') %>];
    var logo_sets_max = <%= (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).length - 1 %>;
    var logo_set_index = 0;
    function fadeLogoSets() {
      $("#logo_set_" + logo_sets[logo_set_index]).fadeOut();
      if (logo_set_index < logo_sets_max) { logo_set_index += 1; } else { logo_set_index = 0; }
      $("#logo_set_" + logo_sets[logo_set_index]).fadeIn();
      setTimeout("fadeLogoSets()" , 7500);
    }
    $(document).ready(function() {
      setTimeout("fadeLogoSets()", 7500);
    });
  <% end %>
</script>

查看：

<% unless (@logos || Logo.order(:position)).empty? %>
  <% maximum_width = (960 - ((@logo_group_size - 1) * 15)) %>
  <div class="logos">
    <h2>Logos</h2>
    <% (@logos || Logo.order(:position)).in_groups_of(@logo_group_size, false).each_with_index do |logo_set, index| %>
      <% set_width = 0 %>
      <%= content_tag(:div, :id => "logo_set_#{index}", :style => (index.zero? ? "display: block;" : "display: none;")) do %>
        <% logo_set.each_with_index do |logo, index| %>
          <% set_width += MiniMagick::Image.open(("http://#{request.env["HTTP_HOST"]}" + logo.image.home.to_s))["width"].to_i %>
          <% image_options = {} %>
          <% image_options.merge!({:style => "margin-right: 0px;"}) if index == (@logo_group_size - 1) %>
          <% if logo.link.blank? %>
            <%= image_tag(logo.image.home, image_options) %>
          <% else %>
            <%= link_to(image_tag(logo.image.home, image_options), logo.link, {:target => "_blank"}) %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  </div>
<% end %>

我确实理解这个问题有些主观。

使用Rails和jQuery淡化动画显示不同宽度的图像列表的最佳方法是什么？

0 个答案: