分享HTML5製作Banner的實例

橫幅廣告(Banner)：

1.橫幅廣告是網路廣告的常見形式，一般位於網頁的醒目位置；當使用者點擊這些橫幅廣告時，通常可以連結到相應的廣告頁面；

2.設計橫幅廣告時，要力求簡單明了，能夠體現出主要的中心主旨，鮮明、形像地表達出最主要的廣告意圖；

3.橫幅廣告可以使靜態圖像，也可以是動態圖像。一般而言，與靜態橫幅廣告相比，動態橫幅廣告更醒目，更能吸引觀眾的注意力；

4.當然這還是在恰當適合的前提下（討厭那種彈窗式和懸浮式的廣告）使用不當會造成意想不到的後果，甚至因此觀看者的反感造成惡性循環，從而對廣告原本的作用大打折扣；

#5.設計橫幅廣告時，究竟是採取靜態形式還是動態形式，取決於哪一種形式能夠把要表達的訊息準確、快速地傳遞給觀看者。

設計過程：

（一）寫HTML5程式碼

##1.輸入點擊Banner時要連結的網站

<a class="banner" href="www.php.cn">

2.在Banner中加入圖片和文字並使用class屬性標識元素

    <a class="banner" href="http://yamoo9.com">
        <img class="banner-logo lazy"  src="/static/imghwm/default1.png"  data-src="images/banner-logo.png"    alt="yamoo9.com"    style="max-width:90%"  style="max-width:90%" />
        <p class="banner-desc">开放知识讲座, 视频Cast!<br /> 分享设计心得的乐园!<br />
        <strong>- Yamoo9</strong></p>
    </a>

（二）寫CSS3樣式表

#1.控制body樣式

body {
    padding: 20px;
    background: #333;
}

2 .控制Banner樣式

a.banner {
    display: block;
    width: 728px;
    height: 176px;
    border: 1px solid #555;
}

3.設定橫幅廣告的Logo標誌

.modern .banner-logo {
    position: absolute;
    top: 20px;
    left: 270px;
}

4.向Banner上的文字套用字體

.modern .banner-desc {
    font: 32px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
}

同時也需要在HTML5程式碼中加入Web字體服務

<title>CSS3 Banner Design - 动画Banner设计</title>
<link href=&#39;api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb&#39; rel=&#39;stylesheet&#39; />

5.設定Banner字體的位置與顏色

.modern .banner-desc {
    opacity: 0;
    position: absolute;
    top: 39px;
    left: 170px;
    font: 39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
    color: #4ec1cd;
}

.modern .banner-desc strong {
    font-size: 23px;
}

6.設定滑鼠指標未移到Banner上的Banner

a.banner {
    position: relative;
    background: 
        url(../images/banner-arrow.png) no-repeat -100px 140px, 
        url(../images/banner-photo.png) no-repeat -40px 220px, 
        url(../images/banner-09.png) no-repeat -20px -380px,
        url(../images/banner-bg.png) no-repeat 0 0;

}
.modern a.banner:hover, a.banner:focus {
    background-position: 
        20px 140px, 
        -40px 20px, 
        -20px -90px,
        0 0;    
}

使用transition函數完成一系列的圖片移動操作

a.banner {
    position: relative;
    background: 
        url(../images/banner-arrow.png) no-repeat -100px 140px, 
        url(../images/banner-photo.png) no-repeat -40px 220px, 
        url(../images/banner-09.png) no-repeat -20px -380px,
        url(../images/banner-bg.png) no-repeat 0 0;

    -webkit-transition: all .2s ease-in .2s;
    -moz-transition: all .2s ease-in .2s;
    -o-transition: all .2s ease-in .2s;
    -ms-transition: all .2s ease-in .2s;
    transition: all .2s ease-in .2s;
}
.modern a.banner:hover, a.banner:focus {
    background-position: 
        20px 140px, 
        -40px 20px, 
        -20px -90px,
        0 0;    
}
.modern .banner-logo {
    position: absolute;
    top: 20px;
    left: 270px;
    -webkit-transition: all .4s ease-out .3s;
    -moz-transition: all .4s ease-out .3s;
    -o-transition: all .4s ease-out .3s;
    -ms-transition: all .4s ease-out .3s;
    transition: all .4s ease-out .3s;
}
.modern a.banner:hover .banner-logo, 
.modern a.banner:focus .banner-logo {
        left: 540px;        
}
.modern .banner-desc {
    opacity: 0;
    position: absolute;
    top: 39px;
    left: 170px;
    font: 39px/1.1 "NanumPenWeb", "方正静蕾简体", "Nanum Pen Script";
    color: #4ec1cd;
    -webkit-transition: all .4s ease-out .3s;
    -moz-transition: all .4s ease-out .3s;
    -o-transition: all .4s ease-out .3s;
    -ms-transition: all .4s ease-out .3s;
    transition: all .4s ease-out .3s;
}

最後使用JQuery播放聲音檔案

/* banner.js - Banner设计脚本, 2012 © yamoo9.com    
---------------------------------------------------------------- */
;(function($){
    $(function() { // $(document).ready(); 文档准备好后运行
        
        var banner_audio= new Audio(),        // 创建Audio.
             webm = isSupportWebM();    // 检查是否支持webm格式
        banner_audio.src = 'media/banner_sound.mp3';
        /*if(webm) {   //支持webm格式
            banner_audio.src = 'media/banner_sound.webm';
        } else {    // 不支持webm格式
            banner_audio.src = 'media/banner_sound.mp3';
        };*/
        $('.banner')
            .bind('mouseover focusin', function() { // 当发生MouseOver，FocusIn事件时调用处理函数
                banner_audio.load(); // 加载audio
                banner_audio.play(); // 播放audio
            })
            .bind('mouseout focusout', function() { // 当发生MouseOut，FocusOut事件时调用处理函数
                banner_audio.pause();             // 暂停audio
                banner_audio.currentTime = 0;    // 初始化audio播放位置
            });
        
    });
})(window.jQuery);

// 检测是否webm格式的函数
function isSupportWebM() {
    var tester = document.createElement('audio');
    return !!tester.canPlayType('audio/webm');
};

【相關推薦】

1. 

免費h5線上影片教學

2. 

HTML5 完整版手冊

3.

 php.cn原始html5影片教學

#4. 

H5 video標籤只能放聲音不能放影片的解決方法

5. 

IIS的MIME未註冊MP4類型，導致無法辨識vidoe標籤的解決方案#

以上是分享HTML5製作Banner的實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！