網頁制作教程:制作拖拽翻頁

2024-07-11 09:03:26

字體：大中小

來源：轉載

供稿：網友

武林網(m.survivalescaperooms.com)文章簡介：拖拽翻頁(ThrowPage)詳解.

原本是為自己的博客網站設計的，周二產生的靈感，周三周四逃課兩天算坐標，周五回家，到傍晚才算寫出了第一版，發布之后沒想到評價還不錯，此后太多人問我這個效果應該怎么修改，才能用到自己的網站上，所以現在發這個帖子詳細解釋一下這個效果的原理

在此正式將此效果命名為 ThrowPage ，而且我肯定會繼續完善這個效果，并發布封裝好的代碼，方便大家調用，可能一個月后，也可能一年后，In Me God Trust

本文將按結構層、表現層、行為層三層分開的順序來寫：

運行代碼框

[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

結構層

要把一個目錄的內容按頁展開，該怎么寫呢？也許是這樣，至少我就是這么寫的

<div id="menu">
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>戀曲1980</a></li>
            <li><span>09-11-25</span><a>戀曲1990</a></li>
            <li><span>09-11-25</span><a>戀曲2000</a></li>
            <li><span>09-11-25</span><a>母親</a></li>
        </ul>
        <span class="tip">1/2頁拖拽翻頁</span>
    </div>
    <div class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侶</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2頁拖拽翻頁</span>
    </div>
</div>

網頁制作教程:制作拖拽翻頁

<ul> 是每一頁的列表，圖中的淺灰色色部分
<li> 是列表中的一條，圖中的珊瑚色部分
<span class="tip"> 是不應該出現在xhtml 中的，應該由 js 添加，它是每一頁下面的索引標識，圖中的深灰色部分
<div class="page"> 是目錄中的頁，圖中的白色部分
<div id="menu"> 是包含了所有頁的目錄，圖中的亮藍色部分。當然，如果頁面中除了這個效果外沒有其他東西的話，這個標簽也可以不寫，那么所有 <div class="page"> 的父標簽就是 <body>
或許你會說，目錄也應該是 <ul>，所以應該這么寫

<ul id="menu">
    <li class="page">
        <ul>
            <li><span>09-11-25</span><a>戀曲1980</a></li>
            <li><span>09-11-25</span><a>戀曲1990</a></li>
            <li><span>09-11-25</span><a>戀曲2000</a></li>
            <li><span>09-11-25</span><a>母親</a></li>
        </ul>
        <span class="tip">1/2頁拖拽翻頁</span>
    </li>
    <ul class="page">
        <ul>
            <li><span>09-11-25</span><a>伴侶</a></li>
            <li><span>09-11-25</span><a>思念</a></li>
            <li><span>09-11-25</span><a>童年</a></li>
            <li><span>09-11-25</span><a>牧童</a></li>
        </ul>
        <span class="tip">2/2頁拖拽翻頁</span>
    </li>
</li>