卡卡网

在前面我们介绍了纯CSS实现水平(横向)滚动列表，在本文中，我们将使用 jQuery 来对标记（div 结构）进行操作，获得水平滚动的功能效果。

demodownload

我们的页面结构是这样的：

<div class="post">
  .. blog post #1 ..
</div>
<div class="post">
  .. blog post #2 ..
</div>
<div class="post">
  .. blog post #3 ..
</div>

现在让我们在页面的 head 部分中包含 jQuery，并编写完成此操作所需的 jQuery。

<script src="js/jquery.js"></script>
<script>
  $(function() {
    $("#page-wrap").wrapInner("<table cellspacing='30'><tr>");
    $(".post").wrap("<td>");
  });
</script>

请注意单元格间距是如何作为内联属性添加到表格元素的。我们通常可以使用 CSS 对单元格应用填充，但我们希望确保每个信息块尽可能可读，即使关闭了 CSS。没有这个，这些块将相互对接，使它们难以阅读。

这个例子的整个 CSS 文件非常非常简单：

* {
  margin: 0; 
  padding: 0; 
}
body { 
  font-size: 62.5%; 
  font-family: 'Lucida Grande', Helvetica, sans-serif;
  background: #121212;
  color: #999; 
  padding: 20px;
}
tr { 
  vertical-align: top;
}
.post { 
  width: 500px; 
}
p { 
  font-size: 1.2em; 
  margin: 0 0 15px 0; 
}
h1 { 
  font-family: Sans-serif; 
  font-size: 4.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}
h2 { 
  font-family: Sans-Serif; 
  font-size: 3.0em;
  letter-spacing: -1px; 
  color: #ccc; 
}

只有几件事值得注意。.post div 上的静态宽度控制每个块的宽度。表格行上的垂直对齐属性使每个块与其表格单元格的顶部对齐。这默认为中间，所以这是必要的。

结果

使用 CSS 和 JavaScript，我们将拥有一个执行良好的水平滚动列表。

相关文章

•  纯CSS实现水平(横向)滚动列表

标签: 水平滚动