admin管理员组文章数量:1530518
2023年12月13日发(作者：)
HTML5设计网页动态条幅广告（Banner）已经加上完整源代
码
横幅广告(Banner)：
1.横幅广告是网络广告的常见形式，一般位于网页的醒目位置上；当用户单击这些横幅广告时，通常可以链接到相应的广告页面；
2.设计横幅广告时，要力求简单明了，能够体现出主要的中心主旨，鲜明、形象地表达出最主要的广告意图；
3.横幅广告可以使静态图像，也可以是动态图像。一般而言，与静态横幅广告相比，动态横幅广告更醒目，更能吸引观众的注意力；
4.当然这还是在恰当适合的前提下（讨厌那种弹窗式和悬浮式的广告）使用不当会造成意想不到的后果，甚至因此观看者的反感造成恶性循
环，从而对广告原本的作用大打折扣；
5.设计横幅广告时，究竟是采取静态形式还是动态形式，取决于哪种形式能够把要表达的信息准确、快速地传递给观看者。
设计过程：
（一）编写HTML5代码
1.输入单击Banner时要链接的网站
2.向Banner中添加图片和文字并使用class属性标识元素
- Yamoo9
（二）编写CSS3样式表
1.控制body样式
body {
padding: 20px;
background: #333;
}
2.控制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字体服务
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上的 {
position: relative;
background:
url(../images/) no-repeat -100px 140px,
url(../images/) no-repeat -40px 220px,
url(../images/) no-repeat -20px -380px,
url(../images/) no-repeat 0 0;
}
.modern :hover, :focus {
background-position:
20px 140px,
-40px 20px,
-20px -90px,
0 0;
}
使用transition函数完成一系列的图片移动操作 {
position: relative;
background:
url(../images/) no-repeat -100px 140px,
url(../images/) no-repeat -40px 220px,
url(../images/) no-repeat -20px -380px,
url(../images/) 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 :hover, :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 :hover .banner-logo,
.modern :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设计脚本, 2012 ©
---------------------------------------------------------------- */
;(function($){
$(function() { // $(document).ready(); 文档准备好后运行
var banner_audio= new Audio(), // 创建Audio.
webm = isSupportWebM(); // 检查是否支持webm格式
banner_ = 'media/banner_3';
/*if(webm) { //支持webm格式
banner_ = 'media/banner_';
} else { // 不支持webm格式
banner_ = 'media/banner_3';
};*/
$('.banner')
.bind('mouseover focusin', function() { // 当发生MouseOver，FocusIn事件时调用处理函数
banner_(); // 加载audio
banner_(); // 播放audio
})
.bind('mouseout focusout', function() { // 当发生MouseOut，FocusOut事件时调用处理函数
banner_(); // 暂停audio
banner_tTime = 0; // 初始化audio播放位置
});
});
})();
// 检测是否webm格式的函数
function isSupportWebM() {
var tester = Element('audio');
return !!yType('audio/webm');
};
版权声明：本文标题：HTML5设计网页动态条幅广告(Banner)已经加上完整源代码 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1702446071a7484.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论