卡卡網(wǎng)

在前面我們介紹了純CSS實現(xiàn)水平(橫向)滾動列表，在本文中，我們將使用 jQuery 來對標(biāo)記（div 結(jié)構(gòu)）進(jìn)行操作，獲得水平滾動的功能效果。

demodownload

我們的頁面結(jié)構(gòu)是這樣的：

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

現(xiàn)在讓我們在頁面的 head 部分中包含 jQuery，并編寫完成此操作所需的 jQuery。

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

請注意單元格間距是如何作為內(nèi)聯(lián)屬性添加到表格元素的。我們通常可以使用 CSS 對單元格應(yīng)用填充，但我們希望確保每個信息塊盡可能可讀，即使關(guān)閉了 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 上的靜態(tài)寬度控制每個塊的寬度。表格行上的垂直對齊屬性使每個塊與其表格單元格的頂部對齊。這默認(rèn)為中間，所以這是必要的。

結(jié)果

使用 CSS 和 JavaScript，我們將擁有一個執(zhí)行良好的水平滾動列表。

相關(guān)文章

•  純CSS實現(xiàn)水平(橫向)滾動列表

標(biāo)簽: 水平滾動