YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Downloads » YAdvBox – 固定浮动广告

YAdvBox – 固定浮动广告

程序简介

YAdvBox – 固定浮动广告特效,自己写的一个独立的浮动广告类,基本的功能都有了,很好用的,可以设置自定义显示位置和显示时间,如果你想类似的广告效果,这个应该是一个不错的选择。核心代码(程序需要调用我自己写的一个小库yao.js,FLASH和视频需要动态加载swfobject.js,播放视频需要加载开源的FLV播放器JW FLVPlayer)

加载图片广告

YAO.adBox.img({
   src: 'http://www.yaohaixiao.com/img/ad.jpg',  // 图片路径 - 必填
   href: 'http://www.yaohaixiao.com/',  // 广告的链接地址 - 必填
   title: '我的图片广告',  // 广告窗口的标题 - 可选
   position: 'CENTER', //  广告窗口的位置 - 可选 
   showtime: 15  // 广告的显示时间 - 可选 (目前我做的处理是图片和flash的广告一定会自动关闭,视频广告可以设置显示时间也可以一直显示)
})

加载图文信息广告

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' // 可选
});

加载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教学视频,我想这样的视频就可以一直显示)
})

下载地址:YAdBox.zip

程序特点:

  1. 支持弹出图片、FLASH、FLV视频和图文信息的广告
  2. 页面加载完后5秒钟弹出(虽然广告总是比较讨厌),这样用户对用户稍微好点。
  3. 可以设置广告显示的自动关闭时间(图片和FLASH的默认显示时间为10秒)
  4. 可以设置广告位: RIGHT – 右下角、CENTER – 浏览器可视区域(viewport)正中间、LEFT – 左下角
  5. 可以设置是否滚动显示广告(默认滚动显示)

程序源代码:

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.call(that);

				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;
			}
			
			callback();
		},
		flv: function(config){
			if (!config.playlist) {
				return false;
			}
			
			var that = this, callback = function(){
				that.show.call(that);
				
				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;
			}
			
			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;
			}
		}
	};
}();

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:YAdvBox – 固定浮动广告

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)