标签：
横幅广告(Banner)：
1.横幅广告是网络广告的常见形式，一般位于网页的醒目位置上；当用户单击这些横幅广告时，通常可以链接到相应的广告页面；
2.设计横幅广告时，要力求简单明了，能够体现出主要的中心主旨，鲜明、形象地表达出最主要的广告意图；
3.横幅广告可以使静态图像，也可以是动态图像。一般而言，与静态横幅广告相比，动态横幅广告更醒目，更能吸引观众的注意力；
4.当然这还是在恰当适合的前提下（讨厌那种弹窗式和悬浮式的广告）使用不当会造成意想不到的后果，甚至因此观看者的反感造成恶性循环，从而对广告原本的作用大打折扣；
5.设计横幅广告时，究竟是采取静态形式还是动态形式，取决于哪种形式能够把要表达的信息准确、快速地传递给观看者。
设计过程：
（一）编写HTML5代码
1.输入单击Banner时要链接的网站
<a class="banner" href="http://yamoo9.com">
2.向Banner中添加图片和文字并使用class属性标识元素
<a class="banner" href="http://yamoo9.com"> <img class="banner-logo" src="images/banner-logo.png" alt="yamoo9.com" width="167" height="134" /> <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=‘http://api.mobilis.co.kr/webfonts/css/?fontface=NanumPenWeb‘ rel=‘stylesheet‘ />
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‘); };
最后的完成作品：
标签：
原文地址：http://www.cnblogs.com/zpfbuaa/p/5456859.html
