分享HTML5制作Banner的实例

百变鹏仔 3个月前 (10-18) #H5教程

文章标签实例

横幅广告(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" src="images/banner-logo.png" alt="yamoo9.com" width="167"    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 = &#39;media/banner_sound.mp3&#39;;        /*if(webm) {   //支持webm格式            banner_audio.src = &#39;media/banner_sound.webm&#39;;        } else {    // 不支持webm格式            banner_audio.src = &#39;media/banner_sound.mp3&#39;;        };*/        $(&#39;.banner&#39;)            .bind(&#39;mouseover focusin&#39;, function() { // 当发生MouseOver，FocusIn事件时调用处理函数                banner_audio.load(); // 加载audio                banner_audio.play(); // 播放audio            })            .bind(&#39;mouseout focusout&#39;, function() { // 当发生MouseOut，FocusOut事件时调用处理函数                banner_audio.pause();             // 暂停audio                banner_audio.currentTime = 0;    // 初始化audio播放位置            });            });})(window.jQuery);// 检测是否webm格式的函数function isSupportWebM() {    var tester = document.createElement(&#39;audio&#39;);    return !!tester.canPlayType(&#39;audio/webm&#39;);};

【

文章推荐

分享HTML5制作Banner的实例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集