福州有捕鱼机卖吗

書名： HTML5+CSS3+JavaScript從入門到精通（微課精編版）
作者名：前端科技
本章字數： 2446字
更新時間： 2019-08-15 16:37:54

4.4　案例實戰

本節將通過多個案例練習如何使用圖像標簽，如何靈活使用JavaScript腳本控制HTML5多媒體播放。

4.4.1　設計圖文新聞

視頻講解

本節示例將設計一個圖文新聞頁面，通過添加圖片，重新設計，優化新聞內容頁的頁面版式，使其結構更符合標準，以適應大型新聞站的自動化編排需要，同時讓頁面設計更具專業性，更適合新聞閱讀習慣。

　注意：本例需要CSS知識，如果讀者暫時不熟悉CSS，建議先跳過本節，等學習完CSS之后，回頭再學習。

【操作步驟】

第1步，啟動Dreamweaver，新建網頁，保存為index.html，在<body>標簽內輸入以下代碼。

設計新聞內容頁面結構，初步效果如圖4.11所示。

圖4.11　未添加圖片效果的新聞內容頁

示例效果

為了能實現圖文并茂的新聞內容頁面，我們需要在頁面內容中插入圖片，而需要修飾的背景圖片只需要通過CSS的background屬性調用即可。因此需要修改HTML頁面結構，通過<img>標簽插入需要在頁面中出現的圖片。

第2步，在<head>標簽內添加<style type="text/css">標簽，定義一個內部樣式表，然后準備定義樣式。

第3步，如果本例繼續使用上一節中提到的樣式設計方法，會發現該頁面中新聞圖片獨占一行，而且并不是居中顯示，對于視覺效果來說并不是很理想，如圖4.12所示。

圖4.12　初步CSS混排效果

第4步，圖文新聞內容頁面的頁面效果大概的外觀已經呈現出來了，但為了能使頁面效果更佳，希望在新聞標題后面添加一個代表新聞內容為圖文新聞的圖標并且將內容區域中的圖片居中顯示。

第5步，修改CSS樣式表中的部分代碼，最終在瀏覽器中會看到如圖4.13所示的效果。

第6步，在上圖中，可以看到新聞圖片的寬高比較小，而繼續使用居中的方式顯示圖文新聞內容頁，將會使圖片的周圍顯得很空闊。這時可以考慮使用圖文環繞的版式設計圖文新聞內容頁，如圖4.14所示。

第7步，在圖4.13中，將圖片由原來的大圖變更為一張小圖，因此在HTML頁面結構中修改<img>標簽中的文件名。

    <img src="images/new_pic_s.jpg" alt="新聞圖片" />

圖4.13　增加圖片效果后的圖文新聞內容頁

圖4.14　文字圍繞著圖片的圖文新聞內容頁

第8步，基于原有的圖文新聞內容頁的CSS樣式，需要將.news-box .content部分的CSS樣式全部去掉，已經不需要再設置新聞內容區域的居中顯示，并設置圖片浮動（float）屬性，使圖片周圍的文字能圍繞著圖片。

    ……
    .news-box .content {
        text-align:center; /* 新聞內容區域居中顯示 */}
    .news-box .content img.news_pic {
        float:left;
        margin-right:10px;} /* 設置文字圍繞著圖片的圖文混排效果 */
    .news-box .content p {
        margin-bottom:10px;
        line-height:22px;
        text-indent:2em;
        text-align:left; /* 調整新聞內容區域文字居左顯示 */
    } /* 新聞內容區域的每個段落加大行間距（行高），并首行縮進，段落與段落之間存在一點間距 */

簡單幾句CSS樣式代碼即可設計漂亮的頁面布局效果。不過圖文混排的頁面效果只能設置圖片居左或者居右顯示，無法實現當圖片在文字內容中間時文字圍繞圖片左右顯示的頁面效果。

4.4.2　設計陰影白邊

視頻講解

本例設計為img元素定義一個默認的陰影樣式，這樣當在網頁中插入一個圖像時，它會自動顯示為陰影效果，如圖4.15所示。與設置前插入的圖像效果比較之后，如圖4.16所示，會發現這種定義有陰影效果的圖像更真實而富有立體感，特別適用于網上照片發布頁面。

圖4.15　為圖像定義默認的陰影樣式

圖4.16　圖像未定義陰影樣式效果

　注意：本例需要CSS知識，如果讀者暫時不熟悉CSS，建議先跳過本節，等學習完CSS之后，回頭再學習。

【操作步驟】

第1步，需要在圖像編輯器中設計一個4像素高、1像素寬的漸變陰影，如圖4.17所示。

示例效果

圖4.17　設計一個漸變陰影圖像

第2步，在網頁<head>標簽中定義如下樣式。

　注意：在定義底邊內邊距，考慮到底邊陰影背景圖像可能要占用4個像素的高度，因此要多設置4像素。左右兩側的陰影顏色可以根據網頁背景色時適當調整深淺。

第3步，在頁面<body>標簽內插入任意多個圖像即可，演示效果如圖4.17所示。

    <img src="images/1.jpg" width="200">
    <img src="images/2.jpg" width="300">
    <img src="images/3.jpg" width="400">

4.4.3　設計音樂播放器

視頻講解

如果需要在頁面上播放一段音頻，同時又不想被默認的控制界面影響顯示效果，則可創建一個隱藏的audio元素，即不設置controls屬性，或將其設置為false，然后用自定義控制界面控制音頻的播放。

本例主要代碼如下：

演示效果如圖4.18所示。

示例效果

圖4.18　用腳本控制音樂播放

在上面示例中，先隱藏了用戶控制界面，也沒有將其設置為加載后自動播放，而是創建了一個具有切換功能的按鈕，以腳本的方式控制音頻播放：

    <button id="toggle" onclick="toggleSound()">播放</button>

按鈕在初始化時會提示用戶單擊它以播放音頻。每次單擊時，都會觸發toggleSound()函數。在toggleSound()函數中，首先訪問DOM中的audio元素和button元素。

通過訪問audio元素的paused屬性，可以檢測到用戶是否已經暫停播放。如果音頻還沒開始播放，那么paused屬性默認值為true，這種情況在用戶第一次單擊按鈕的時候遇到。此時，需要調用play()函數播放音頻，同時修改按鈕上的文字，提示再次單擊就會暫停。

    else {
        music.pause();
        toggle.innerHTML ="播放";
    }

相反，如果音頻沒有暫停，則會使用pause()函數將它暫停，然后更新按鈕上的文字為“播放”，讓用戶知道下次單擊的時候音頻將繼續播放。

4.4.4　設計視頻播放器

視頻講解

本例將設計一個視頻播放器，用到HTML5提供的video元素和HTML5提供的多媒體API的擴展，示例演示效果如圖4.19所示。

圖4.19　設計視頻播放器

示例效果

使用JavaScript控制播放控件的行為（自定義播放控件），實現如下功能：

　利用HTML+CSS制作一個自己的播放控件條，然后定位到視頻最下方。

　視頻加載loading效果。

　播放、暫停。

　總時長和當前播放時長顯示。

　播放進度條。

　全屏顯示。

【操作步驟】

第1步，設計播放控件。

上面是全部HTML代碼，.controls類就是播放控件HTML，引用CSS外部樣式表：

    <link rel="stylesheet" href="css/font-awesome.css">
    <link rel="stylesheet" href="css/player.css">

為了顯示播放按鈕等圖標，本例使用了字體圖標。

第2步，設計視頻加載loading效果。先隱藏視頻，用一個背景圖片替代，等視頻加載完畢之后，再顯示并播放視頻。

第3步，設計播放功能。在JavaScript腳本中，先獲取要用到的DOM元素。

    var video = document.querySelector("video");
    var isPlay = document.querySelector(".switch");
    var expand = document.querySelector(".expand");
    var progress = document.querySelector(".progress");
    var loaded = document.querySelector(".progress > .loaded");
    var currPlayTime = document.querySelector(".timer > .current");
    var totalTime = document.querySelector(".timer > .total");

當視頻可以播放時，顯示視頻：