YAdBox - 固定浮动广告特效

YAdBox - 固定浮动广告特效程序演示Demo

程序简介

YAdBox - 固定浮动广告特效，自己写的一个独立的浮动广告类，基本的功能都有了，很好用的，可以设置自定义显示位置和显示时间，如果你想类似的广告效果，这个应该是一个不错的选择。

Adbox

演示地址：加载图文信息广告加载Flash广告

演示的效果是弹出视频广告，不过我这个视频是一个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.link) {
			content.appendChild(imgAd.link);
		}
		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简单的测试了一下代码的执行效率还不错，兼容性也还可以。好了，就这么多了。

YAOHAIXIAO.COM

YAdBox - 固定浮动广告特效程序演示Demo

程序简介

Categories