卡卡網(wǎng)

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

demodownload

我們的頁(yè)面結(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)在讓我們?cè)陧?yè)面的 head 部分中包含 jQuery，并編寫(xiě)完成此操作所需的 jQuery。

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

請(qǐng)注意單元格間距是如何作為內(nèi)聯(lián)屬性添加到表格元素的。我們通常可以使用 CSS 對(duì)單元格應(yīng)用填充，但我們希望確保每個(gè)信息塊盡可能可讀，即使關(guān)閉了 CSS。沒(méi)有這個(gè)，這些塊將相互對(duì)接，使它們難以閱讀。

這個(gè)例子的整個(gè) CSS 文件非常非常簡(jiǎn)單：

* {
  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)寬度控制每個(gè)塊的寬度。表格行上的垂直對(duì)齊屬性使每個(gè)塊與其表格單元格的頂部對(duì)齊。這默認(rèn)為中間，所以這是必要的。

結(jié)果

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

相關(guān)文章

•  純CSS實(shí)現(xiàn)水平(橫向)滾動(dòng)列表

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