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:; 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:; 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://pan.baidu.com/s/1hsCWACs
推荐技术分享网站:http://www.jianshu.com/users/d130a6d54c7b/latest_articles(技术分享,欢迎大家捧场)
HTML5设计网页动态条幅广告(Banner) 已经加上完整源代码的更多相关文章
- HTML5设计网页熔岩灯导航(navigation bar)插件 已经加上完整源代码
导航栏(navigation bar): 1.指位于页眉区域的,在页眉横幅图片上边或下边的一排水平导航按钮,它起着链接博客的各个页面的作用. 2.网页设计中不可缺少的部分,它是指通过一定的技术手段,为 ...
- 15个前卫的 HTML5 & CSS3 网页设计作品
今天,我们编译收集一组使用 HTML5 和 CSS3 制作的精美网站.在此集合中,你可以看到平面设计,网页设计,作品集和企业网站设计实例. 响应式设计和基于 HTML5 & CSS3 编码的网 ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- 使用 HTML5 设计辅助功能
使用 HTML5 设计辅助功能 Rajesh Lal 下载代码示例 如果您真的对面向广大受众感兴趣,将需要为网站设计辅助功能. 辅助功能使网页更易于访问.更易于使用,可供每个人浏览. 通常,使用最新的 ...
- 用XAML做网页!!—广告展示区
原文:用XAML做网页!!-广告展示区 此次我们来进行广告展示区块的制作. 首先在Show区块中去掉原来设置的背景色,加入新的渐变背景设定: <Grid.Background> <L ...
- Android UI - 实现广告Banner旋转木马效果
Android UI - 实现广告Banner旋转木马效果 前言 本篇博客要分享的一个效果是实现广告Banner轮播效果,这个效果也比較常见,一些视频类应用就常常有,就拿360影视大全来举例吧: 用红 ...
- HTML5&CSS3经典动态表格
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 网页动态切换母版页(MasterPage)
原文:网页动态切换母版页(MasterPage) 是否可以变更网页的母版页(MasterPage)呢?某.aspx在创建时,已经附加入某一母版页(MasterPage)了,现需要.aspx动态变更母版 ...
- ASP.NET网页动态添加、更新或删除数据行
ASP.NET网页动态添加.更新或删除数据行 看过此篇<ASP.NET网页动态添加数据行> http://www.cnblogs.com/insus/p/3247935.html的网友,也 ...
随机推荐
- C语言学习011:带参数的main函数
直接上代码 #include <stdio.h> int main(int argc,char *argv[]){ printf("%i \n",argc); int ...
- C#:基于WMI查询USB设备信息 及 Android设备厂商VID列表
/* ---------------------------------------------------------- 文件名称:WMIUsbQuery.cs 作者:秦建辉 MSN:splashc ...
- VB.NET Winform的一些功能实现
近段时间,开发的需要,需要写一个winform的程序.用VB.NET来写. 开发开始,需要实现一个窗体设为多文档界面 (MDI) 子窗体的容器.实现这个功能,开始找资料,得知设置一个属性:Form.I ...
- Ubuntu Server 16.04下ASP.NET Core Web Api + MySql + Dapper在 Jexus、nginx 下的简单测试
一.环境及工具 1.服务器 VirtualBox5.1.4 安装 Ubuntu Server 16.04 amd64 MySql Ver 14.14 Distrib 5.6.21 Jexus 5.8. ...
- C#多种方式获取文件路径
string str5=Application.StartupPath;//获取启动了应用程序的可执行文件的路径,不包括可执行文件的名称. string str1 =Process.GetCurren ...
- Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类
背景 通过添加下列类,可以快捷的变换背景颜色,如果是链接的话,鼠标移动上去会变暗 bg-primary 被修饰元素将会应到primary类,显示吃淡蓝色,文本颜色会变成白色. bg-success 被 ...
- C#再识委托
从C#1到C#3逐步认识委托,由于C#4与C#5对委托改动并不大,故不作说明. 好久没看.NET了,一直在搞HybridAPP,都忘得差不多了,这也是自己从书中摘下笔迹,供日后翻阅. C# 1 1.什 ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析(一)ConnectionState
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...
- Runtime获取一个类中所有成员变量的名字和类型
- sublime text之sublimeCodeIntel 的配置
sublimeCodeIntel 的配置 智能提示插件,这个插件的智能提示功能非常强大,可以自定义提示的内容库,我的Python智能提示设置(配置文件路径为packages\SublimeCodeIn ...