在前面我們介紹了純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實現水平(橫向)滾動列表

標簽: 水平滾動