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

侧栏浮动定位

2011年09月25日

侧栏浮动定位

在前端开发的过程中,我们常常会遇到这样那样的漂浮窗,如 对联式广告,侧栏广告,小通知功能 等,这些需求都是在页面上固定一个地方,无论页面怎么resize 如滚动,改变窗口大小等操作,该模块保持在页面的某一个地方不变。以下是我写的可以应对各种需求的一套浮动层代码

工作原理:

非ie6情况下直接使用 position:fixed 来解决浮动定位,对ie6进行个别处理。

演示地址:http://www.jackness.org/lab/object/side_float/demo.html

JS源码部分:

/* 侧栏浮动定位
 * sideFloat(targetElement,option)
 * -targetElement:需进行漂浮的对象
 * -option:{
 * 	top:    定义漂浮层的css属性 top
 * 	left:   定义漂浮层的css属性 left
 * 	bottom: 定义漂浮层的css属性 bottom
 * 	right:  定义漂浮层的css属性 right
 * 	closeBtn:关闭按钮对象
 * 	zIndex: 初始深度
 * }
 * example:
 * ---------------------------------------
 * 	sideFloat("#lt_banner",{top:10,left:10,closeBtn:"#lt_banner_close"}).init();
	sideFloat("#rt_banner",{bottom:10,right:10,closeBtn:"#rt_banner_close"}).init();
 * ---------------------------------------
 * power by jackness
 * date:2011-9-21
 * ver 1.0
 */


var sideFloat = function(){
	
	var option ={
		
		//position
		top:"auto",
		left:"auto",
		bottom:"auto",
		right:"auto",
		
		//关闭按钮对象
		closeBtn:null,
		
		//层深度
		zIndex:5000
	}
	
	var _op;
	var _targetElement;
	var _floatArea;
	var _posStardard = "top";
	
	arguments[0]? _targetElement = easy_switch( arguments[0] ):"";
	arguments[1]? _op = arguments[1]:"";
	
	function getCssValue(elm,attribute){
		try{
			return	elm.currentStyle?elm.currentStyle[attribute]:document.defaultView.getComputedStyle(elm,false)[attribute];
		}
		catch(e){
			return false;
		}	
	}
	
	//判断是否ie6
	function isIE6(){
		if(window.XMLHttpRequest)
			return false;	
		else
			return true;
	}
	function easy_switch(elm){
		if(typeof elm == "string"){
			var strs = elm.split(" ");
			var targetElements = [document.body];
			for(var i in strs){
				if(!targetElements){return false;}
				var flagGroups = new Array();
				
				for(var j in targetElements){
					
					var datasource = typeSwitcher(targetElements[j],strs[i]);
					if(!datasource){return false;}
					if(!datasource.length){
						if(datasource){
							flagGroups.push(datasource);
						}
					}
					else{
						
						for(var k = 0; k < datasource.length; k++){
							if(datasource[k]){
								flagGroups.push(datasource[k])
							}
						}	
					}
					
				}
				targetElements = flagGroups;
			}
			if(targetElements.length ==1){return targetElements[0]}
			else {return targetElements;}
		}
		else{
			return elm;	
		}
		function typeSwitcher(elm,str){
			
			if(str.substring(0,1) == "#"){
				return document.getElementById( str.substring(1,str.length) )	
			}
			else if(str.substring(0,1) == "."){
				var flag = elm.getElementsByTagName("*");
				var results = [];
				for(var i in flag){
					if(flag[i].className == str.substring(1,str.length)){
						results.push(flag[i]);	
					}	
				}
				return results;
			}
			else{
				var result = elm.getElementsByTagName(str)	
				if(result.length >0){
					return result;	
				}
				else{
					return false;	
				}
			}
		}
	}
	
	function addEvent(type,elm,func){
		if( elm.attachEvent ){
			elm.attachEvent("on" + type,func);
		}
		else if( elm.addEventListener){
			elm.addEventListener(type,func,false);
		}
	}

	function removeEvent(type,elm,func){
		if(elm.detachEvent){
			elm.detachEvent("on" + type,func)
		}
		else if(elm.removeEventListener){
			elm.removeEventListener(type,func,false)
		}
		
	}
	
	//对象初始化
	function areaReset(){
		
		//_targetElement 初始化
		switch(getCssValue(_targetElement,"position")){
			case "staic":break;
			case "relative":
			case "fixed":
			case "absolute": _targetElement.style.top = 0; _targetElement.style.left = 0; break;
		}
		
		//_floatArea 初始化
		_floatArea = document.createElement("outset");
		
		var cssStr = "";
		cssStr += "display:block;";
		cssStr += "height:" + _targetElement.offsetHeight + "px;";
		cssStr += "width:" + _targetElement.offsetWidth + "px;";
		
		option.right != "auto"? (
			cssStr += "right:" + option.right + "px;"
		):"";
		
		option.left != "auto"? (
			cssStr += "left:" + option.left + "px;"
		):"";
		
		option.bottom != "auto"? (
			cssStr += "bottom:" + option.bottom + "px;",
			_posStardard = "bottom"
		):"";
		
		option.top != "auto"? (
			cssStr += "top:" + option.top + "px;",
			_posStardard = "top"
		):"";
		
		
		
		isIE6()?(
			cssStr += "position:absolute;"
		):(
			cssStr += "position:fixed;"
		);
		
		_floatArea.style.cssText = cssStr;
		
		_floatArea.appendChild(_targetElement);
		document.body.appendChild(_floatArea);
		
		//事件绑定
		if(!isIE6()){return;}
		addEvent("scroll",window,positionFix);
		addEvent("resize",window,positionFix);
	}
	
	function positionFix(){
		var source;
		_posStardard == "top"?(
			source = (document.documentElement.scrollTop||document.body.scrollTop) + option.top,
			source > document.documentElement.scrollHeight - _floatArea.offsetHeight?(
				source = document.documentElement.scrollHeight - _floatArea.offsetHeight
			):""
		):(
			source = (document.documentElement.scrollTop||document.body.scrollTop) + document.documentElement.clientHeight - _floatArea.offsetHeight - option.bottom
		);
		
		_floatArea.style.top = source + "px";
	}
	
	return{
		
		//属性设置
		setOption:function(op){
			op.top? option.top = parseInt(op.top):"";
			op.bottom? option.bottom = parseInt(op.bottom):"";
			op.left? option.left = parseInt(op.left):"";
			op.right? option.right = parseInt(op.right):"";
			op.zIndex? option.zIndex = parseInt(op.zIndex):"";
			
			op.closeBtn? option.closeBtn = easy_switch( op.closeBtn ):"";
			return this;
		},
		
		//函数初始化
		init:function(){
			if(!_targetElement){return;}
			if(_op){this.setOption(_op);}
			
			//区域初始化
			areaReset();
			
			//添加关闭事件
			if(option.closeBtn){
				addEvent("click",option.closeBtn,function(){
					document.body.removeChild(_floatArea);
					if(isIE6()){
						removeEvent("scroll",window,positionFix);
						removeEvent("resize",window,positionFix);
					}
				})
			}
			
		}
		
	}
	
}	
	
分类javascript
阅读 2,128
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

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

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