Question

我正在尝试创建一个页面，滚动网站，其中包含一系列图像和相应的标题。我想将标题修复到页面底部。我想这个解决方案将涉及为每个图像分配一个id，当它离窗口顶部一定距离时会触发一个隐藏/显示事件。在this example中，每个标题都写在包含其对应图像的表格中。我正在使用表格来显示图像，因为我还没有找到一种合适的方法来响应地在页面上垂直和水平地居中显示图像;这是我正在处理的另一个问题。

以下是相关代码：

<html>
<body>

    <a id="1">

        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
        <tr valign="middle"><td align="center" colspan="2">

            <img src="31.jpg" width="40%" style="padding-top:30px; max-width:672px">

        </td></tr>
        <tr valign="bottom"><td style="padding:0 0 12 12" height="30">

            Cover for a book of photographs

        </td><td align="right" style="padding:0 12 12 0">

            <a href="#27" style="padding-right:12px">Up</a><a href="#2">Down</a>

        </td></tr>
        </table>

    </a>

    <a id="2">

        <table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%">
        <tr valign="middle"><td align="center" colspan="2">

            <img src="22-2.jpg" width="75%" style="padding-top:30px; max-width:1260px">

        </td></tr>
        <tr valign="bottom"><td style="padding:0 0 12 12" height="30">

            Title and double-page spread for a book of photographs

        </td><td align="right" style="padding:0 12 12 0">

            <a href="#1" style="padding-right:12px">Up</a><a href="#3">Down</a>

        </td></tr>
        </table>

    </a>

    ...

</body>
</html>

Answer 1

首先，我会使用div而不是表格。然后我会设置一个总是固定在底部的div，带有一个元素和id，你可以访问并更改标题的文本。然后使用javacript：

if ($('#yourDivThatContainsTheImage').is(':visible'))

查看包含图像的div是否可见。您将需要具有特定ID的单独div中的每个图像。您可以根据ID设置标题文本。您将遇到的问题是何时设置文本。如果您正在滚动并且一个图像的下半部分可见，而另一个图像的上半部分可见。你什么时候改变文字。

使用this解决方案存在类似问题。

此外，在创建响应式页面时，Bootstrap是一种很好的工作方式。我非常喜欢在{div>布局中使用bootstrap和images的this示例。

您可能想尝试使用Angularjs。它会将标记减少到几行。像this示例：

<div ng-app='myApp' ng-controller='DemoController'>
  <div infinite-scroll='loadMore()' infinite-scroll-distance='2'>
    <img ng-repeat='image in images' ng-src='http://mysite.it/225x250&text={{image}}'>
  </div>
</div>

您可以使用infinite scroll加载图片。如果您的图像列表增长或缩小，那么您几乎无法改变任何内容。

您可以将bootstrap和angular结合起来以获得所需的结果，以下是您如何布局代码的想法：

<div class="container">//bootstrap class
     <div class="row" ng-repeat='image in images'>//angular ng-repeat on the row i.e image in images
            <div class="col-md-10 col-md-offset-1">//container for the image
                  <img ng-src="{{image.source'}}"/>//angular bind to image                
            </div>
      </div>
</div>

单页，滚动网站，固定动态页脚

1 个答案: