HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码

横幅广告(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="data: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(); // 加载audiobanner_audio.play(); // 播放audio
            }).bind('mouseout focusout', function() { // 当发生MouseOut，FocusOut事件时调用处理函数banner_audio.pause();             // 暂停audiobanner_audio.currentTime = 0;    // 初始化audio播放位置
            });});
})(window.jQuery);// 检测是否webm格式的函数
function isSupportWebM() {var tester = document.createElement('audio');return !!tester.canPlayType('audio/webm');
};

最后的完成作品：http://pan.baidu.com/s/1hsCWACs

Head First 系列 https://pan.baidu.com/s/1cGiODg

转载于:https://www.cnblogs.com/zpfbuaa/p/5456859.html

HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码相关推荐

FFmpeg：进行qsv加速转码，以及如何动态更改编码器的选项(附完整源代码)
FFmpeg:进行qsv加速转码,以及如何动态更改编码器的选项 #include <stdio.h> #include <errno.h> #include <libav ...
HTML5期末大作业：博客网页设计——个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:博客网页设计--个人博客5页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
HTML5期末大作业：个人网页设计——薛之谦6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:个人网页设计--薛之谦6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个人 ...
WAI-ARIA无障碍网页应用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
HTML5期末大作业：体育网页设计——篮球专题6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:体育网页设计--篮球专题6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游 ...
HTML5期末大作业：电影网页设计——在线影院6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:电影网页设计--在线影院6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
HTML5期末大作业：家居/家电/家居网站设计——html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机...
HTML5期末大作业:家居/家电/家居网站设计--html家具装饰网站设计30页(含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网 ...
HTML5期末大作业：旅游网页设计——山东旅游9页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:旅游网页设计--山东旅游9页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript 常见网页设计作业题材有个人. 美食. ...
HTML5期末大作业：游戏网页设计——穿越火线6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:游戏网页设计--穿越火线6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...

HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码

HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码相关推荐

最新文章

热门文章