YAdBox - 固定浮动广告特效
程序来源：YAOHAIXIAO.COM发表时间：2010 - 02 - 11
程序简介
YAdBox - 固定浮动广告特效，自己写的一个独立的浮动广告类，基本的功能都有了，很好用的，可以设置自定义显示位置和显示时间，如果你想类似的广告效果，这个应该是一个不错的选择。
演示地址：加载图文信息广告 加载Flash广告 加载FLV视频广告
演示的效果是弹出视频广告，不过我这个视频是一个JAVASCRIPT教程，所以没有设置自动关闭。好了，简单介绍一下广告代码的特点：
- 1. 支持弹出图片、FLASH、FLV视频和图文信息的广告
- 2. 页面加载完后5秒钟弹出（虽然广告总是比较讨厌），这样用户对用户稍微好点。
- 3. 可以设置广告显示的自动关闭时间（图片和FLASH的默认显示时间为10秒）
- 4. 可以设置广告位: RIGHT - 右下角、CENTER - 浏览器可视区域(viewport)正中间、LEFT - 左下角
- 5. 可以设置是否滚动显示广告，默认滚动显示
调用十分方便：
加载图片广告
YAO.adBox.img({
src: 'http://www.yaohaixiao.com/img/ad.jpg', // 图片路径 - 必填
href: 'http://www.yaohaixiao.com/', // 广告的链接地址 - 必填
title: '我的图片广告', // 广告窗口的标题 - 可选
position: 'CENTER', // 广告窗口的位置 - 可选
showtime: 15 // 广告的显示时间 - 可选 （目前我做的处理是图片和flash的广告一定会自动关闭，视频广告可以设置显示时间也可以一直显示）
})
加载FLASH广告
YAO.adBox.swf({
src: 'http://www.yaohaixiao.com/swf/ad.swf', // flash路径 - 必填
title: '我的图片广告', // 广告窗口的标题 - 可选
position: 'CENTER', // 广告窗口的位置 - 可选
showtime: 15 // 1 - 1秒 - 可选
})
加载FLV视频广告
YAO.adBox.flv({
playlist: 'http://www.yaohaixiao.com/swf/ad.flv', // 视频路径 - 必填 （JS FLVPLAYER同时也支持加载XML格式的视频列表）
title: '我的图片广告', // 广告窗口的标题 - 可选
position: 'CENTER', // 广告窗口的位置 - 可选
showtime: 15 // 1 - 1秒 - 可选 （不写就代表一是显示广告，广告需要用户自己关闭。比如我的JS教学视频，我想这样的视频就可以一直显示）
})
加载图文信息广告
YAO.adBox.msg({
text: '一个很经典的标签导航效果，点击标签新闻滚动，可以设置自动滚动或手动滚动。ytabs.js中的moveElement方法来处理滚动效果。 ytabs.js中还包含了YAO和tabView两个类，YAO是我根据YUI还有一些其他资源整理的一个常用方法类...', // 必填
href: 'http://www.yaohaixiao.com/javascript/', // 必填
title: 'YTabs！多标签自动横向滚动新闻导航', // 可选
src: 'http://www.yaohaixiao.com/scripts/ytabs-scroll-ajaxtabs/img/h-1.jpg' // 可选
});
好了，看看核心代码(程序需要调用我自己写的一个小库yao.js，FLASH和视频需要动态加载swfobject.js，播放视频需要加载开源的FLV播放器JW FLVPlayer)：
YAO.adBox = function(){
var Y = YAO,
D = window.document,
body = D.body,
head = D.getElementsByTagName('head')[0],
IE6 = Y.userAgent.ie === 6 ? true : false,
HOST = 'http://www.yaohaixiao.com/',
SWFJS_PATH = HOST + 'js/swfobject.js',
LATER_TIME = 5000,
FLASH_VER = '8',
WIDTH = 326,
HEIGHT = 276,
CONTENT_WIDTH = 320,
CONTENT_HEIGHT = 240,
SCROLL_SPEED = 50,
COMPONENTS = {
WINDOW: 'y-adwindow',
TITLEBAR: 'y-adtitlebar',
TITLE: 'y-adtitle',
CLOSEBTN: 'y-adclosebar',
CLOSEBTN_TIP: '关闭窗口',
CONTENT: 'y-adcontent',
IMAGE: 'y-adimage',
LINK: 'y-adlink',
FLASH: 'adflash',
VIDEO: 'advideo',
MESSAGE: 'y-admessage',
MSG_INFO: 'y-admsg-info',
MSG_VIEW: 'y-admsg-view',
MSG_VIEW_TIP: '查看详情',
MSG_IMG: 'y-admsg-image'
},
position = 'RIGHT',
showTime = 10,
isDisplay = false,
isScroll = true,
adWindow = null,
title = 'YAO Popup Advertisement Box',
closeBtn = null,
content = null,
imgAd = {
link: null,
img: null,
href: '',
src: ''
},
swfAd = {
flash: null,
src: ''
},
flvAd = {
player: null,
SRC: HOST + 'swf/flvplayer.swf',
playlist: ''
},
msgAd = {
message: null,
title: '',
href: '',
text: '',
img: null,
src: ''
},
createAdBox = function(){
// 创建关闭按钮
closeBtn = Y.Builder.node('a', {
id: COMPONENTS.CLOSEBTN,
href: "#closeAd",
tilte: COMPONENTS.CLOSEBTN_TIP
}, COMPONENTS.CLOSEBTN_TIP);
// 创建广告内容容器
content = Y.Builder.node('div', {
id: COMPONENTS.CONTENT
});
adWindow = Y.Builder.node('div', {
id: COMPONENTS.WINDOW
}, [Y.Builder.node('div', {
id: COMPONENTS.TITLEBAR
}, [Y.Builder.node('h2', {
id: COMPONENTS.TITLE
}, title), closeBtn]), content]);
Y.setStyle(adWindow, 'display', 'none');
body.appendChild(adWindow);
// 判断将什么内容添加到内容容器中
if (imgAd.img) {
content.appendChild(imgAd.img);
}
else {
if (msgAd.message) {
content.appendChild(msgAd.message);
}
}
};
return {
img: function(config){
if (!config.src || !config.href) {
return false;
}
var that = this;
imgAd.src = config.src;
imgAd.href = config.href;
if (config.position && Y.isString(config.position)) {
position = config.position.toUpperCase();
}
if (config.title) {
title = config.title;
}
if(config.showtime && Y.isNumber(config.showtime) && config.showtime >= 1){
showTime = config.showtime;
}
if(Y.isBoolean(config.scroll) && !config.scroll){
isScroll = false;
}
imgAd.img = Y.Builder.node('img', {
id: COMPONENTS.IMAGE,
src: imgAd.src,
alt: title
});
imgAd.link = Y.Builder.node('a', {
id: COMPONENTS.LINK,
title: title,
href: imgAd.href
}, imgAd.img);
if (imgAd.img.complete) {
this.show();
}
else {
Y.on(imgAd.img, 'load', function(){
that.show.call(that);
});
}
},
swf: function(config){
if (!config.src) {
return false;
}
var that = this, callback = function(){
that.show();
swfAd.flash = new SWFObject(swfAd.src, COMPONENTS.FLASH, CONTENT_WIDTH, CONTENT_HEIGHT, FLASH_VER);
swfAd.flash.addParam('wmode', 'transparent');
swfAd.flash.write(COMPONENTS.CONTENT);
};
swfAd.src = config.src;
if (config.position && Y.isString(config.position)) {
position = config.position.toUpperCase();
}
if (config.title) {
title = config.title;
}
if(config.showtime && Y.isNumber(config.showtime) && config.showtime >= 1){
showTime = config.showtime;
}
if(Y.isBoolean(config.scroll) && !config.scroll){
isScroll = false;
}
Y.loadScript(SWFJS_PATH, callback);
},
flv: function(config){
if (!config.playlist) {
return false;
}
var that = this, callback = function(){
that.show();
flvAd.flvPlayer = new SWFObject(flvAd.SRC, COMPONENTS.VIDEO, CONTENT_WIDTH, CONTENT_HEIGHT, FLASH_VER);
flvAd.flvPlayer.addParam('wmode', 'transparent');
flvAd.flvPlayer.addParam('allowfullscreen', 'true');
flvAd.flvPlayer.addParam('allowscriptaccess', 'always');
flvAd.flvPlayer.addVariable('width', CONTENT_WIDTH);
flvAd.flvPlayer.addVariable('height', CONTENT_HEIGHT);
flvAd.flvPlayer.addVariable('file', flvAd.playlist);
flvAd.flvPlayer.addVariable('autostart', 'true');
flvAd.flvPlayer.addVariable('overstretch', 'fit');
flvAd.flvPlayer.addVariable("usefullscreen", "true");
flvAd.flvPlayer.addVariable('showstop', 'true');
flvAd.flvPlayer.addVariable('showdownload', 'true');
flvAd.flvPlayer.addVariable('screencolor', '0x000000');
flvAd.flvPlayer.addVariable('backcolor', '0xCCCC66');
flvAd.flvPlayer.addVariable('frontcolor ', '0xFFFFFF');
flvAd.flvPlayer.addVariable('lightcolor', '0x000000');
flvAd.flvPlayer.addVariable('autoscroll', 'true');
flvAd.flvPlayer.addVariable('shuffle', 'false');
flvAd.flvPlayer.addVariable("enablejs", "true");
flvAd.flvPlayer.addVariable("javascriptid", "jsflvplayer");
flvAd.flvPlayer.write(COMPONENTS.CONTENT);
};
flvAd.playlist = config.playlist;
if (config.position && Y.isString(config.position)) {
position = config.position.toUpperCase();
}
if (config.title) {
title = config.title;
}
showTime = config.showtime || 0;
if(Y.isBoolean(config.scroll) && !config.scroll){
isScroll = false;
}
Y.loadScript(SWFJS_PATH, callback);
},
msg: function(config){
if (!config.href || !config.text) {
return false;
}
var that = this,
msgInfo = Y.Builder.node('p', {
id: COMPONENTS.MSG_INFO
}),
msgContent = D.createDocumentFragment();
msgAd.href = config.href;
msgAd.text = config.text;
if(config.src){
msgAd.src = config.src;
}
if (config.position && Y.isString(config.position)) {
position = config.position.toUpperCase();
}
if (config.title) {
title = config.title;
}
showTime = config.showtime || 0;
if(Y.isBoolean(config.scroll) && !config.scroll){
isScroll = false;
}
if (msgAd.src) {
msgAd.img = Y.Builder.node('a', {
href: msgAd.href,
title: title
}, Y.Builder.node('img', {
id: COMPONENTS.MSG_IMG,
alt: title,
src: msgAd.src
}));
msgContent.appendChild(msgAd.img);
}
msgContent.appendChild(Y.Builder.text(msgAd.text));
msgInfo.appendChild(msgContent);
msgAd.message = Y.Builder.node('div', {
id: COMPONENTS.MESSAGE
}, [msgInfo, Y.Builder.node('p', {
id: COMPONENTS.MSG_VIEW
}, Y.Builder.node('a', {
href: msgAd.href
}, COMPONENTS.MSG_VIEW_TIP))]);
this.show();
},
show: function(){
if (!isDisplay) {
var that = this;
createAdBox();
Y.fixPosition(adWindow, position, WIDTH, HEIGHT, isScroll);
Y.on(closeBtn, 'click', function(event){
var evt = event || window.event;
that.close.call(that);
Y.stopEvent(evt);
});
Y.on(window, 'resize', function(){
Y.fixPosition(adWindow, position, WIDTH, HEIGHT, false);
});
if (IE6) {
Y.on(window, 'scroll', function(){
Y.fixPosition(adWindow, position, WIDTH, HEIGHT, false);
});
}
setTimeout(function(){
var left = 0, top = 0;
Y.setStyle(adWindow, 'display', 'block');
isDisplay = true;
left = parseInt(Y.getStyle(adWindow, 'left'), 10);
top = parseInt(Y.getStyle(adWindow, 'top'), 10) - HEIGHT;
if (isScroll && position !== 'CENTER') {
Y.moveElement(adWindow, left, top, SCROLL_SPEED);
}
if (imgAd.img || swfAd.flash || (flvAd.player && showTime) || (msgAd.message && showTime)) {
if (isScroll && position !== 'CENTER') {
setTimeout(function(){
Y.moveElement(adWindow, left, top + HEIGHT, SCROLL_SPEED, function(){
that.close.call(that);
});
}, showTime * 1000);
}
else {
setTimeout(function(){
that.close.call(that);
}, showTime * 1000);
}
}
}, LATER_TIME);
}
},
close: function(){
if (isDisplay) {
Y.purge(closeBtn);
body.removeChild(adWindow);
isDisplay = false;
}
}
};
}();
广告窗口的CSS代码
/* 广告窗口 */
#y-adwindow{
position:absolute;
z-index:999;
width:320px;
height:270px;
overflow:hidden;
background-color:#FFF;
border:3px solid #B0BEC7;
}
/* 广告标题栏 */
#y-adtitlebar{
position:relative;
z-index:1000;
margin:0 auto;
width:100%;
height:27px;
line-height:27px;
background-color:#EAEFF5;
border-bottom:3px solid #B0BEC7;
overflow:hidden;
}
/* 广告标题文字 */
#y-adtitlebar h2{
margin:0 auto;
width:100%;
height:27px;
line-height:27px;
text-indent:6px;
text-align:left;
font-size:12px;
color:#369;
}
#y-adtitlebar a:link,
#y-adtitlebar a:visited,
#y-adtitlebar a:hover{
position:absolute;
z-index:1001;
top:6px;
right:6px;
width:15px;
height:15px;
color:#369;
background:transparent url(../img/tool-sprites.gif) 0 0 no-repeat;
text-indent:-999px;
text-decoration:none;
overflow:hidden;
}
#y-adtitlebar a:hover{
background:transparent url(../img/tool-sprites.gif) -15px 0 no-repeat;
}
#y-adcontent{
margin:0 auto;
width:100%;
height:240px;
overflow:hidden;
}
#y-adcontent,
#y-adcontent img{
width:100%;
height:240px;
}
如果你还希望添加窗口出现时有平滑的滚动效果，也可以自己添加上去，我这里觉得广告有这些功能也就OK了。我用firebug简单的测试了一下代码的执行效率还不错，兼容性也还可以。好了，就这么多了。
Download：YAdBox.rar
个人简介
- 姓名：姚海啸
- 年龄：28岁
- 学历：大专
- 职业：前端工程师
奋斗目标：成为顶尖的前端工程师
我的作品
