欢迎来到 jackNEss'窝窝
I like simple mind

活动弹窗广告

2012年06月27日

活动弹窗广告

活动弹窗广告,类似于侧栏漂浮广告,但是又比侧栏多了些需求功能,可以说是定制化的侧栏漂浮广告,公司最近新空间上线需要做一个活动页的侧栏广告,放置在新空间和播放页上面,由于公司之前一直没模块化过这一活动弹窗广告功能,所以我也顺便重写了一下这一功能,让这活动弹窗广告尽可能地适应日后的各种需求,避免重复工作。

一般侧栏浮动广告功能点

一般的侧栏浮动广告如 对联广告,右下角弹窗广告那些,主要功能点有以下几个方面:

  • 一般可分为2种类型:图片式弹窗广告、flash式弹窗广告
  • 始终固定在页面的某个位置上,不受页面缩放,滚动影响
  • 带有关闭按钮
  • 浮动广告内容易于更改与替换
  • 支持一个页面同时多个弹窗广告
  • 若右下角弹出型广告需要加入滑动出现与消失缓动效果(用户体验好些)

活动弹窗广告功能点

除了包含 一般侧栏浮动广告功能点外,活动弹窗广告功能点还有:

活动期限

由于活动广告通常带有一个活动时间:

活动开始时间和活动结束时间,提供这样一个接口可以减轻后台人员活动弹窗上线与下线的工序,如 活动为凌晨上线,那么后台人员就不必特意凌晨爬起来更新广告,减轻后台人员工作负担。

当然js读取的这个时间其实是客户本机的时间,换句话说如果用户的机器上时间影响着这个活动弹窗功能的出现与撤下的时间安排,所以一般的活动广告最后还是得由后台人员来帮忙撤下,而js只是减轻后台人员的负担,减轻…一点点的负担,哈。

活动广告出现间隔

像那种点击一次就有钱拿的 google广告、百度广告等与点击量相挂钩的浮动广告,这种形式的广告就想用户点击进去,所以总是不厌其烦地出现在用户的眼前。

而活动广告更类似于系统提醒,站内消息那样,用户知道以后,就不必反复,重复出现了,用户在点击关闭按钮之后,我们就认为TA已经知道活动广告里面的内容了,所以这里得为广告在cookies里面储存一个值,当用户点击关闭时给cookies的变量一个值,并设置一个时效,在时效范围之内,这个活动广告将不再出现,减少对用户的滋扰。

需要考虑的问题

能否直接将参数存到地址栏里面,方便调用

这样做的好处就是能够让这个js不需累赘的另外对这个js进行初始化等操作的处理。
但是后来在项目应用的过程中发现,这样存在几个问题:

  • js引入一定要在<body>标签里面,不能放在<head>里面,否则生成不了。
  • 地址栏传参数对参数格式要求比较严格,诸多限制。

基于上述问题考虑,最后还是放弃了地址栏传参的方法,改回用传统方式实现。

简化api使用时输入的代码量,模块化弹窗内容

给予部分非必要参数默认值,当不输入的情况下,按默认值里的值执行函数。

提供常用接口,让api更具扩展性,灵活性

提供尽量多的接口以满足日后的各种需求,减少二次开发。

代码部分

活动弹窗模块js代码如下

/*
 * 活动漂浮广告
 * f2e_floatbox(option) option允许 string 和 object 2种形式
 * option = {
		width:          弹窗宽度, 单位为px, 默认值为300
		height:         弹窗高度, 单位为px, 默认值为300

		type:           弹窗类型 选填 "img" 或者 "media",默认值为"img"
		src:            当 type=img 时, src表示图片地址
		                当 type=media时, src表示 flash的.swf地址

		href:           图片跳转地址, 当 type=img 时有效, 默认值为 ""
		flashvars:      flash播放器参数, 当 type=media 时有效,默认值为 ""

		left:           弹窗距页面左侧距离,单位为px, 默认值为 auto,变量赋值必须为int类型
		right:          弹窗距页面右侧距离,单位为px, 默认值为 auto,变量赋值必须为int类型
		                left,right 选填一个,否则以 right取值为准;

		top:            弹窗距页面上侧距离,单位为px, 默认值为 auto,变量赋值必须为int类型
		bottom:         弹窗距页面下侧距离,单位为px, 默认值为 auto,变量赋值必须为int类型
		                top,bottom 选填一个,否则以 bottom 取值为准

		slide:          是否有滑动出现动画效果,布尔值,默认值为 true
		zIndex:         弹窗 z-index 深度, 默认值为5000
		appearInterval: 当按关闭按钮之后,弹窗出现间隔,单位为小时,默认值为 12
		startDate:      弹窗有效时间-开始时间, 格式 "2012-6-8 12:10:00" 或者 2012/6/8 23:59:59
		endDate:        弹窗有效时间-结束时间, 格式 "2012-6-8 12:10:00" 或者 2012/6/8 23:59:59
		cookiesName:    弹窗记录在cookies里面的名字
		transition:     滑动动画动作时间, 单位为 ms, 默认值为 500,
		interval:       滑动动画每帧动画间隔, 单位为 ms, 默认值为 20
 * }
 * f2e_floatbox().setOption(option) 属性设置 option允许 string 和 object 2种形式
 * f2e_floatbox().init()            函数执行
 * 
 * -------------------------------------------------------
 * example:
 
 图片式活动广告-demo
 方式一(完整版):
 f2e_floatbox({
 	width:306,
	height:227,
	type:"img",
	src:"http://s1.56img.com/script/ui/floatbox/assets/56zone_update_img.png",
	href:"http://huodong.56.com/2012/spacelevelup/index.php",
	right:10,
	bottom:0,
	slide:true,
	zIndex:5000,
	appearInterval:12,
	startDate:"2012-6-18 15:00:00",
	endDate:"2012-6-18 18:38:00",
	transition:500,
	interval:20
 }).init();
 

 方式二(完整版):
 f2e_floatbox("width=306&height=227&type=img&src=http://s1.56img.com/script/ui/floatbox/assets/56zone_update_img.png&href=http://huodong.56.com/2012/spacelevelup/index.php&right=10&bottom=0&slide=true&zIndex=5000&appearInterval=12&startDate=2012-6-18&endDate=2012-6-19&transition=500&interval=20").init()

 flash式活动广告-demo
 方式一(完整版):
 f2e_floatbox({
 	width:306,
	height:227,
	type:"media",
	src:"http://player.56.com/v_NjkyNTc1MjI.swf",
	right:10,
	bottom:0,
	slide:true,
	zIndex:5000,
	appearInterval:12,
	startDate:"2012-6-18 15:00:00",
	endDate:"2012-6-18 18:38:00",
	transition:500,
	interval:20
 }).init();

 方式二(完整版):
 f2e_floatbox("width=306&height=227&type=media&src=http://player.56.com/v_NjkyNTc1MjI.swf&right=10&bottom=0&slide=true&zIndex=5000&appearInterval=12&startDate=2012-6-18&endDate=2012-6-19&transition=500&interval=20").init()
 * -------------------------------------------------------
 * Author:JackNEss Lau
 * date:2012-6-26
 * ver 1.13
 */

var f2e_floatbox = function(){
	var option = {
		//弹窗 宽度
		width:300,
		
		//弹窗 高度
		height:300,
		/*
		 * 当 media为图片式弹窗时,src表示图片地址
		 * 当 media 为多媒体式弹窗时,src为 .swf地址
		 */
		src:"",
		
		// 当 type 为图片式弹窗时 href 为 图片连接地址
		href:"",
		
		// 当 type 为 media时 当做是 播放器的 参数
		flashvars:"",
		
		//弹窗 left 值
		left:"auto",
		
		//弹窗 top 值
		top:"auto",
		
		//弹窗 right 值
		right:"auto",
		
		////弹窗 bottom 值
		bottom:"auto",
		
		//设置弹窗类型:img/media
		type:"img",
		
		//是否有滑动出现动画效果
		slide:true,
		
		//窗体初始深度
		zIndex:5000,
		
		//出现间隔 单位:小时
		appearInterval:12,
		
		//v1.1新增 弹窗有效日期-开始日期 格式 "2012-6-8 12:10:00" 或者 2012/6/8 23:59:59
		startDate:null,
		
		//v1.1新增 弹窗有效日期-结束日期 格式 "2012-6-8 12:10:00" 或者 2012/6/8 23:59:59
		endDate:null,
		
		cookiesName:"jnsFloatBox",
		
		transition:500,

		interval:20
	}
	var _op;
	arguments[0]? _op = arguments[0]:"";

	// jns start
	var jns = {};
	/*
	 * console
	 * exp:jns.console("elm is undefined")
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.console = function(msg){
		if(typeof console != "undefined"){
			console.log(msg);
		}
	}

	/*
	 * element selector
	 * exp: jns.selector("#a .b span")
	 * exp: jns.selector("#a");
	 * exp: jns.selector(elm);
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.selector = function(source){
		var dc = document;
			
		if( typeof source == "object"){
			return source;
		}
		else if( typeof source == "string"){
			
			var strGroup = source.split(/\s+/);
			var strGroup_len = strGroup.length;
			var fragSource;
			var fragSource_len;
			var result = dc;
			if(strGroup_len == 1 && strGroup[0].substring(0,1) == "#"){
				return dc.getElementById( strGroup[0].substring(1) )
			}
			else{
				if(dc.querySelectorAll){
					result = dc.querySelectorAll(source); 
				}
				else{
					for( var i = 0; i < strGroup_len; i++){
						fragSource = strGroup[i];
						fragSource_len = fragSource.length;
						if(fragSource_len == 0){continue;}
						switch(fragSource.substring(0,1)){
							case "#": result = idSelector(result,fragSource.substring(1)); break;
							case ".": result = classSelector(result,fragSource.substring(1)); break;
							default : result = tagSelector(result,fragSource); break;
						}
					}
					result = [].concat(result);
					
				}
				if(result.length == 0){
					return false;
				}
				
				else if(result.length == 1){
					return result[0];
				}
				
				else{
					return result;
				}
			}
		}
		
		function idSelector(target,idStr){
			return dc.getElementById(idStr);
		}
		
		function classSelector(target,className){
			var targetGroup = [].concat(target);
			var targetGroup_len = targetGroup.length;
			var result = [];
			var fragTarget;
			var fragGroup;
			var fragTarget_cells;
			var fragTarget_cells_len;
			var fragClassNames;
			var fragClassNames_len;
			for( var i = 0; i < targetGroup_len; i++){
				fragTarget = targetGroup[i];
				if(!fragTarget){continue;}
				fragTarget_cells = fragTarget.getElementsByTagName("*");
				fragTarget_cells_len = fragTarget_cells.length;
				
				for( var k = 0; k < fragTarget_cells_len; k++){
					fragClassNames = fragTarget_cells[k].className.split(" ");
					fragClassNames_len = fragClassNames.length;
					
					for( var j = 0; j < fragClassNames_len; j++){
						if(fragClassNames[j] == className){
							result = result.concat(fragTarget_cells[k]);
							break;
						}
					}
				}
				
				
			}
			return result;
		}
		
		function tagSelector(target,tagStr){
			var targetGroup = [].concat(target);
			var targetGroup_len = targetGroup.length;
			var result = [];
			var fragTarget;
			var fragGroup;
			var fragGroup_len;
			for( var i = 0; i < targetGroup_len; i++){
				fragTarget = targetGroup[i];
				if(!fragTarget){continue;}
				fragGroup = fragTarget.getElementsByTagName(tagStr);
				fragGroup_len = fragGroup.length;
				for( var j = 0; j < fragGroup_len;j++){
					result = result.concat(fragGroup[j]);
				}
			}
			return result;
		}
	}
	
	/*
	 * each
	 * exp: jns.each(targets,function(){alert(this);})
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.each = function(elms,func){
		if(!elms){return;}
		if(typeof elms.length == "undefined"){
			elms = [elms];
		}
		for( var i = 0, len = elms.length; i < len; i++){
			func.call(elms[i]);
		}
	}

	/*
	 * add event
	 * exp: jns.bind(elm,"click",clickHandle)
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.bind = function(target,type,func){
		if(typeof func != "function" || !target || typeof type != "string"){return;}
		if(target.addEventListener){
			target.addEventListener(type,_addEvent,false);

		}
		else if(target.attachEvent){
			target.attachEvent("on" + type,_addEvent);
		}
		
		if(!func.jnsBindKey){ func.jnsBindKey = [];}
		func.jnsBindKey.push({target:target,bindKey:_addEvent});

		function _addEvent(e){
			func.call(target,e);
		}
	}

	/*
	 * remove event 1.1
	 * exp: jns.unbind(elm,"click",clickHandle)
	 * date: 2012-5-28
	 * ver 1.1
	 */
	jns.unbind = function(target,type,func){
		if(typeof func != "function" || !target || typeof type != "string"){return;}
		var unbindKey;
		if(func.jnsBindKey){
			for( var i = 0, len = func.jnsBindKey.length; i < len; i++ ){
				var fragSource = func.jnsBindKey[i];
				if(fragSource.target == target){
					unbindKey = fragSource.bindKey;
					func.jnsBindKey.splice(i,1);
					break;
				}
			}
		}
		else{
			unbindKey = func;
		}
		if(target.removeEventListener && typeof type == "string" && unbindKey){
			target.removeEventListener(type,unbindKey);
		}
		else if(target.detachEvent){
			target.detachEvent("on" + type,unbindKey);
		}
	}

	/*
	 * 惯性运动
	 * exp: jns.inertiaMotion(So,St,T).Sn(Tn)
	 * exp: jns.intiaMotion(So,St,T).Vn(Tn)
	 * exp: 
	 	var acc = jns.intiaMotion(So,St,T);
		var Sn = acc.Sn(Tn)
		var Vn = acc.Vn(Tn)
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.inertiaMotion = function(So,St,T){
		var S = Math.abs(St - So);
		var a = S/Math.pow(T/2,2);
		var Vt = a*T/4;
		
		
		return{
			Sn:function(Tn){
				var _Sn;
				Tn < T/2?(
					_Sn = So + a*Math.pow(Tn,2)/2 * ( parseInt( (St - So)/Math.abs(St - So) )||0 )
				):(
					Tn < T?(
						_Sn = So +  ( a*Math.pow(T/2,2)  - a*Math.pow(T - Tn,2)/2 )*( parseInt( (St - So)/Math.abs(St - So) )||0 )
					):(
						_Sn =  St
					)
				);
				
				return _Sn;
			},
			Vn:function(Tn){
				var _Vn;
				Tn < T/2?(
					_Vn = a*Tn/2
				):(
					Tn < T?(
						_Vn = Vt - a*(Tn - T/2)/2
					):(
						_Vn = 0
					)
				);
				return _Vn;
			}	
		}
	}

	/*
	 * css样式设置/获取
	 * jns.css(elm,"background")
	 * jns.css(elm,"backgroun","red")
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.css = function(target,styleAttr,value){
		if(!target || typeof target.style == "undefined" || typeof styleAttr != "string"){return;}
		if(typeof value != "undefined"){
			//set
			target.style[styleAttr] = value;
		}
		else{
			//get
			var fStyleValue = target.style[styleAttr];
			if(fStyleValue){
				return fStyleValue;
			}
			else{
				try{
					return	target.currentStyle?target.currentStyle[styleAttr]:document.defaultView.getComputedStyle(target,false)[styleAttr];
				}
				catch(e){
					return null;
				} 
			}
		}
	}

	/*
	 * cookies 操作
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.cookies = {
		/* 
		 * 获取 cookies中的某个变量
		 * exp:jns.cookies.get("jackNEss")
		 */
		get:function(name){
			var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     		if(arr != null) return unescape(arr[2]); return null;
		},
		/*
		 * 在cookies中设置变量与值。delayHours:持续时间,单位:小时
		 * exp:jns.cookies.set("jackNEss","handle",20)
		 */
		set:function(name,value,delayHours){
			if(!delayHours){
				delayHours = 24;
			}
			var exp  = new Date();    
			exp.setTime(exp.getTime() + delayHours*60*60*1000);
			document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
		},
		/*
		 * 删除cookies中的某个变量
		 * exp:jns.cookies.del("jackNEss")
		 */
		del:function(name){
			var exp = new Date();
			exp.setTime(exp.getTime() - 1);
			var cval = jns.cookies.get(name);
			if(cval!=null) document.cookie= name + "="+cval+";expires="+exp.toGMTString();
		}
	}
	
	/*
	 * 格式转换操作
	 * date: 2012-6-8
	 * ver 1.0
	 */
	jns.format = {
		/*
		 * 将数据转换成 Date格式
		 * exp:jns.format.toDate("2012-5-8")
		 */
		toDate:function(source){
			var result;
			switch(typeof source){
				case "string": result = new Date(source.split("-").join("/"));break;
				case "object": result = new Date(source);break;
			}
			if(result == "Invalid Date"){
				result = null;
			}
			return result;
		}
	}
	
	/*
	 * 是否ie6 
	 * exp:jns.isIE6
	 * date: 2012-5-25
	 * ver 1.0
	 */
	jns.isIE6 = (function(){
		if(window.XMLHttpRequest){
			return false;
		}
		else{
			return true;
		}
	})();
	// jns end

	var ctrl = {
		floatbox:null,
		media:null,
		closeBtn:null,
		outset:null
	}

	var attr = {
		posStardard:"top"
	}

	function moduleRebuild(){
		var dc = document;
		var cssText = "";
		ctrl.floatbox = dc.createElement("div");
		cssText = "";
		cssText += "; position:relative";
		cssText += "; display:block";
		cssText += "; width:" + option.width + "px";
		cssText += "; height:" + option.height + "px";
		cssText += "; margin:0";
		cssText += "; padding:0";
		ctrl.floatbox.style.cssText = cssText;
		
		ctrl.closeBtn = dc.createElement("i");
		cssText = "";
		cssText += "; position:absolute";
		cssText += "; " + (option.top == "auto"?"top":"bottom") + ":-29px";
		cssText += "; right:1px";
		cssText += "; width:18px";
		cssText += "; height:19px";
		cssText += "; background:url(http://s1.56img.com/script/ui/floatbox/assets/float_box_close_btn.png) no-repeat";
		cssText += "; cursor:pointer";
		ctrl.closeBtn.style.cssText = cssText;

		if( option.type == "img"){
			ctrl.media = dc.createElement("a");
			ctrl.media.href = option.href;
			ctrl.media.target = "_blank";
			ctrl.media.innerHTML = '<img class="floatbox_img" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="' + option.src + '" width="' + option.width + '" height="' + option.height + '" alt="" style="display:block; border:0;"/>';
		}
		else if (option.type == "media"){
			ctrl.media = dc.createElement("embed");
			ctrl.media.setAttribute("height",option.height);
			ctrl.media.setAttribute("width",option.width);
			ctrl.media.setAttribute("allowfullscreen",true);
			ctrl.media.setAttribute("type","application/x-shockwave-flash");
			ctrl.media.setAttribute("wmode","opaque");
			ctrl.media.setAttribute("pluginspage","http://www.macromedia.com/go/getflashplayer");
			ctrl.media.setAttribute("quality","high");
			ctrl.media.setAttribute("flashvars",option.flashvars);
			ctrl.media.setAttribute("src",option.src);
		}

		dc.body.appendChild(ctrl.floatbox);
		ctrl.floatbox.appendChild(ctrl.closeBtn);
		ctrl.floatbox.appendChild(ctrl.media);
	}

	function areaReset(){
		//module init
		moduleRebuild();
		dc = document;
		switch(jns.css(ctrl.floatbox,"position")){
			case "staic":break;
			case "relative":
			case "fixed":
			case "absolute": 
				ctrl.floatbox.style.position = "absolute"; 
				option.slide?(
					
					option.bottom != "auto"?(
						ctrl.floatbox.style.top = ctrl.floatbox.offsetHeight + "px"
					):(
						option.top != "auto"?(
							ctrl.floatbox.style.top = -ctrl.floatbox.offsetHeight + "px"
						):(
							ctrl.floatbox.style.top = ctrl.floatbox.offsetHeight + "px"
						)
					)
					
				):(
					ctrl.floatbox.style.top = 0
				);
				ctrl.floatbox.style.left = 0; break;
		}

		ctrl.outset = document.createElement("outset");
		
		var cssStr = "";
		cssStr += "; z-index:" + option.zIndex;
		cssStr += "; display:block";
		cssStr += "; overflow:" + (option.slide?"hidden":"visible");
		cssStr += "; height:" + ctrl.floatbox.offsetHeight + "px";
		cssStr += "; width:" + ctrl.floatbox.offsetWidth + "px";
		
		option.right != "auto"?(
			cssStr += "; right:" + option.right + "px",
			option.left = "auto"
		):(
			option.left != "auto"?(
				cssStr += "; left:" + option.left + "px"
			):(
				cssStr += "; right:" + 0 + "px",
				option.right = 0
			)
		);

		option.bottom != "auto"?(
			cssStr += "; bottom:" + option.bottom + "px",
			attr.posStardard = "bottom",
			option.top = "auto"
		):(
			option.top != "auto"?(
				cssStr += "; top:" + option.top + "px",
				attr.posStardard = "top"
			):(
				cssStr += "; bottom:" + 0 + "px",
				attr.posStardard = "bottom",
				option.bottom = 0
			)
		);
		
		
		jns.isIE6?(
			cssStr += "; position:absolute"
		):(
			cssStr += "; position:fixed"
		);
		
		ctrl.outset.style.cssText = cssStr;
		
		dc.body.appendChild(ctrl.outset);
		ctrl.outset.appendChild(ctrl.floatbox);

		jns.bind(ctrl.closeBtn,"click",function(){
			if(option.slide){
				slideDownEvent(function(){
					closeBtnHandle();
				});
			}
			else{
				closeBtnHandle();
			}
			function closeBtnHandle(){
				dc.body.removeChild(ctrl.outset);
				jns.unbind(window,"scroll",positionFix);
				jns.unbind(window,"resize",positionFix);
				jns.cookies.del(option.cookiesName);
				jns.cookies.set(option.cookiesName,(new Date()).getTime(),option.appearInterval);
			}
		})
		if(option.slide){
			slideUpEvent();
		}

		//事件绑定
		if(!jns.isIE6){return;}
		jns.bind(window,"scroll",positionFix);
		jns.bind(window,"resize",positionFix);
	}

	function slideUpEvent(callback){

		var T = option.transition/option.interval;
		var Tn = 0;
		var So = parseInt(ctrl.floatbox.style.top);
		var St = 0;
		var acc =  new jns.inertiaMotion(So,St,T);

		(function(){
			Tn < T?(
				ctrl.floatbox.style.top = acc.Sn(Tn) + "px",
				Tn++,
				setTimeout(arguments.callee,option.interval)
			):(
				ctrl.floatbox.style.top = St + "px",
				ctrl.outset.style.overflow = "visible",
				typeof callback == "function"?callback():""
			)
		})();
	}

	function slideDownEvent(callback){

		var T = option.transition/option.interval;
		var Tn = 0;
		var So = parseInt(ctrl.floatbox.style.top);
		var St;
		option.bottom != "auto"?(
			St = ctrl.floatbox.offsetHeight
		):(
			option.top != "auto"?(
				St = -ctrl.floatbox.offsetHeight
			):(
				St = ctrl.floatbox.offsetHeight
			)
		)
		var acc =  new jns.inertiaMotion(So,St,T);
		(function(){
			Tn < T?(
				ctrl.floatbox.style.top = acc.Sn(Tn) + "px",
				Tn++,
				setTimeout(arguments.callee,option.interval)
			):(
				ctrl.floatbox.style.top = St + "px",
				ctrl.outset.style.overflow = "visible",
				typeof callback == "function"?callback():""
			)
		})();
	}

	function positionFix(){
		var dc = document;
		var source;
		attr.posStardard == "top"?(
			source = (dc.documentElement.scrollTop||dc.body.scrollTop) + option.top,
			source > dc.documentElement.scrollHeight - ctrl.outset.offsetHeight?(
				source = dc.documentElement.scrollHeight - ctrl.outset.offsetHeight
			):""
		):(
			source = (dc.documentElement.scrollTop||dc.body.scrollTop) + dc.documentElement.clientHeight - ctrl.outset.offsetHeight - option.bottom
		);
		
		ctrl.outset.style.top = source + "px";
	}

	return{
		setOption:function(op){
			if( typeof op == "object"){
				typeof op.width == "number"? option.width = op.width:"";
				typeof op.height == "number"? option.height = op.height:"";
				typeof op.left == "number"? option.left = op.left:"";
				typeof op.top == "number"? option.top = op.top:"";
				typeof op.right == "number"? option.right = op.right:"";
				typeof op.bottom == "number"? option.bottom = op.bottom:"";
				typeof op.zIndex == "number"? option.zIndex = op.zIndex:"";
				typeof op.appearInterval == "number"? option.appearInterval = op.appearInterval:"";
				typeof op.transition == "number"? option.transition = op.transition:"";
				typeof op.interval == "number"? option.interval = op.interval:"";
				op.startDate? option.startDate = jns.format.toDate(op.startDate):"";
				op.endDate? option.endDate = jns.format.toDate(op.endDate):"";
				op.cookiesName? option.cookiesName = op.cookiesName:"";

				typeof op.src == "string"? option.src = op.src:"";
				typeof op.href == "string"? option.href = op.href:"";
				typeof op.flashvars == "string"? option.flashvars = op.flashvars:"";
				if(typeof op.type == "string"){ 
					switch(op.type){
						case "img":
						case "IMG": option.type = "img"; break;
						case "media":
						case "MEDIA": option.type = "media"; break;
						default: break;
					}
				};
				typeof op.slide == "boolean"? option.slide = op.slide:"";
			}
			else if ( typeof op == "string"){
				var attrGroup = op.split(/\s*&\s*/);
				for(var i = 0, len = attrGroup.length; i < len; i++){
					var fs = attrGroup[i].split(/\s*=\s*/);
					var fAttr = fs[0];
					var fValue = fs[1];
					switch(fAttr){
						case "width": option.width = parseInt(fValue); break;
						case "height": option.height = parseInt(fValue); break;
						case "left": option.left = parseInt(fValue); break;
						case "top": option.top = parseInt(fValue); break;
						case "right": option.right = parseInt(fValue); break;
						case "bottom": option.bottom = parseInt(fValue); break;
						case "zIndex": option.zIndex = fValue; break;
						case "appearInterval": option.appearInterval = parseInt(fValue); break;
						case "src": option.src = fValue; break;
						case "href": option.href = fValue; break;
						case "flashvars": option.flashvars = fValue; break;
						case "type": option.type = ((fValue == "img"||fValue == "IMG")?"img":"media");break;
						case "slide": option.slide = (fValue == "true"?true:false); break;
						case "transition": option.transition = parseInt(fValue); break;
						case "interval": option.interval = parseInt(fValue); break;
						case "startDate": option.startDate = jns.format.toDate(fValue); break;
						case "endDate": option.endDate = jns.format.toDate(fValue); break;
						case "cookiesName": option.endDate = fValue; break;
						default:break;
					}
				}
			}
			return this;
		},
		
		init:function(){
			if(_op){this.setOption(_op);}
			if(!option.src){return;}
			// v1.1新增 start 
			var now = new Date();
			if(option.startDate){
				if(now < option.startDate){ return;}
			}
			if(option.endDate){
				if(now > option.endDate){return;}
			}
			// v1.1新增 end 
			var timeAttr = parseInt(jns.cookies.get(option.cookiesName));
			if(timeAttr){return ;}
			areaReset.call(this);
		}
	}
}

demo地址可以点击 这里 查看

分类javascript
阅读 714
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS