在线制作banner php,分享HTML5制作Banner的实例
横幅广告(Banner):
1.横幅广告是网络广告的常见形式,一般位于网页的醒目位置上;当用户单击这些横幅广告时,通常可以链接到相应的广告页面;
2.设计横幅广告时,要力求简单明了,能够体现出主要的中心主旨,鲜明、形象地表达出最主要的广告意图;
3.横幅广告可以使静态图像,也可以是动态图像。一般而言,与静态横幅广告相比,动态横幅广告更醒目,更能吸引观众的注意力;
4.当然这还是在恰当适合的前提下(讨厌那种弹窗式和悬浮式的广告)使用不当会造成意想不到的后果,甚至因此观看者的反感造成恶性循环,从而对广告原本的作用大打折扣;
5.设计横幅广告时,究竟是采取静态形式还是动态形式,取决于哪种形式能够把要表达的信息准确、快速地传递给观看者。
设计过程:
(一)编写HTML5代码
1.输入单击Banner时要链接的网站
2.向Banner中添加图片和文字并使用class属性标识元素
开放知识讲座, 视频Cast!
分享设计心得的乐园!
- Yamoo9
(二)编写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字体服务
CSS3 Banner Design - 动画Banner设计
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上的Bannera.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');
};
【相关推荐】
在线制作banner php,分享HTML5制作Banner的实例相关推荐
- html5 制作书架展示 PHP,html5制作转盘的详解及实例
今天给大家带来的案列是html5转盘实例,可以直接拿来做抽奖程序,有需要的朋友可以拿去使用,下面是案列代码. html5制作转盘游戏 h1{ width: 100%; height: 3rem; li ...
- html制作圆盘时钟,jquery+html5制作超酷的圆盘时钟表
自己封装的一个用HTML5+jQuery写的时钟表 代码: 超酷数码钟表 //引用的是在线jquery地址,如果不行请自行下载切换 (function($){ $.fn.drawClock = fun ...
- 电脑PHP动画制作画板,HTML_html5教程制作简单画板代码分享,HTML5制作简单画板
复制代码代 - phpStudy...
html5教程制作简单画板代码分享 HTML5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min ...
- HTML5期末大作业:电影在线网站设计——漫威电影(2页) 免费大学生网页设计制作作业作品下载dreamweaver制作静态html网页设计作业作
HTML5期末大作业:电影在线网站设计--漫威电影(2页) 免费大学生网页设计制作作业作品下载dreamweaver制作静态html网页设计作业作 常见网页设计作业题材有 个人. 美食. 公司. 学校 ...
- 【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )
文章目录 一.Banner 栏版心盒子测量 1.测量版心元素尺寸 2.课程表测量 二.Banner 版心盒子模型左侧导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.展示效果 一.Bann ...
- html5 在线 ppt 制作软件,使用HTML5制作网页.ppt
使用HTML5制作网页 技术文档不做精美排版 http://ylmf.eu正在策划中 根据你们询问的人,HTML 5不是迈向创造更语义化的网络的下一 个重要步伐,就是用一系列不完整的标签和标记大杂烩让 ...
- 用html制作生动的画板,html5教程制作简单画板代码分享
html5制作简单画板 复制代码代码如下: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">> ...
- SpringBoot如何自定义启动的Banner 在线生成SpringBoot启动的Banner工具 如何使用在线生成工具生成的SpringBoot的Banner
这里写目录标题 1. 引言 2. 生成自定义banner 2.1 通过文件引入 2.2 通过代码实现 3. 在线制作banner的网站 3.1 文本格式 3.2 图片格式 4. 参考文档 1. 引言 ...
- 图文并茂使用CocosBuilder制作Cocos2D游戏 分享0
图文并茂使用CocosBuilder制作Cocos2D游戏 分享0 目 录 The Game 设置工程 创建动画类型的主界面 本文由Zynga 工程师原创,翻译:Iven,张作宸,Butterfly ...
- 怎么用html5制作申请表,html-5 表格的制作
<html-5 表格的制作>由会员分享,可在线阅读,更多相关<html-5 表格的制作(6页珍藏版)>请在人人文库网上搜索. 1.教学项目五 HTML中表格的制作[教学内容]讲 ...
最新文章
- 金融数据分析(二)-------基本资本,金融衍生品,资本收益率
- 【实验】如何实现远程同一网段互通?
- 多线程小抄集(新编一)
- P1576 最小花费
- Keycloak SSO集成到jBPM和Drools Workbench中
- CSS3景深-perspective
- python二维数组操作_Python二维数组应用与操作
- 计算机中2的四次方为啥是4位,计算机基础试题2(4页)-原创力文档
- 同时安装Python2,Python3如何解决冲突问题【官方解法】
- 在Chrome浏览器中保存的密码有多安全?
- linux内核启动地址的确定
- 中小型企业网络规划设计方案_实战:企业网络系统规划与设计与事项
- 新点软件怎么导入清单_新点清单造价怎么导入电脑桌面上
- 天涯 大神 kkndme 房地产 调控
- linux修改主机名临时/永久
- 【零基础】极星9.3下单详解
- cmake添加查找目录_CMake如何查找库路径(一)
- 【数据库与SQL】力扣刷题SQL篇(7)
- 拳皇2000 全出招表 (ARC)
- 几种遍历数组的方法原理
热门文章
- 微信小程序订阅消息wx.requestSubscribeMessage使用要点和requestSubscribeMessage:can only be invoked by userTAPgestur
- 使用swipe组件,切换图片时出现闪烁
- 黑苹果2k显示器开启hidpi_关于黑苹果固态硬盘4K对齐和Trim的开启
- turtle(海龟)库的使用
- 生成验证码并判断用户是否输入正确
- android 软键盘弹出内容整体上移,软键盘弹出后布局上移
- html中clear标签意义,html中的clear是什么意思
- excel加密的两种实现方式
- 金蝶K3线上采购价格审批生效系统开发
- [转载]MATLAB内存管理