js jQuery.float

为什么80%的码农都做不了架构师？>>>   

<!-- lang: js -->
/**
 * float.js
 * @update		2011-3-15
 * @version		0.3
 * jquery.float是一个基于jquery，将div或者其他元素固定显示在某个位置，即使浏览器滚动和调整大小。
 * 参数:
 * top:距离窗口顶部的距离
 * left:距离窗口左边的距离
 * zIndex:
 * type:
 * 
 * 参数常用常量：
 * l：左对齐
   r：右对齐
   m：中间对齐
   t：顶部对齐
   b：底部对齐
   lm：左边中间对齐
   rm：右边中间对齐
   tm：顶部中间对齐
   bm：底部中间对齐
   
   将id为floatDiv的元素浮动在浏览器窗口的右下角。
   $("#floatDiv").float("rb");
   等同于
   $("#floatDiv").float({top:"b",left:"r"});
   
   将id为floatTips的元素在浏览器滚动过程中，固定显示在浏览器窗口的顶部。
   $("#floatTips").float();

 */
 (function($) {
	var _default={
		top:null,left:null,zIndex:"500",type:"fixed"
	};
	var win=$(window);
	var $float=function(element,options){
		var self=this;
		this.InitConfig=function(){
			if(!options){
				//autoFloat
				options=_default;
			}else if(typeof(options)=="string"){
				switch(options)
				{
					case "lt":
					case "tl":
						options={left:"l",top:"t"};
						break;
					case "tr":
					case "rt":
						options={left:"r",top:"t"};
						break;
					case "br":
					case "rb":
						options={left:"r",top:"b"};
						break;
					case "bl":
					case "lb":
						options={left:"l",top:"b"};
						break;
					case "mt":
					case "tm":
						options={left:"m",top:"t"};
						break;
					case "lm":
					case "ml":
						options={left:"l",top:"m"};
						break;
					case "rm":
					case "mr":
						options={left:"r",top:"m"};
						break;
					case "bm":
					case "mb":
						options={left:"m",top:"b"};
						break;
				}
				options=$.extend({}, _default, options);
			}
		};
		this.getPos=function(obj)
		 {
			var win_h=win.height();//当前窗口的高度 不带滚动条
			var win_w=win.width();//当前窗口的宽度
			var o_w=obj.outerWidth();
			var o_h=obj.outerHeight();

			var pos={left:options.left,top:options.top};
			switch(options.left)
			 {
				case "l":pos.left=0;break;
				case "r":	pos.left=win_w-o_w;break;
				case "m":pos.left=(win_w-o_w)/2;break;
				default:
					if(!pos.left){
						if(options.type=="absolute"){
							pos.left=obj.position().left;
						}else{
							pos.left=obj.offset().left;
						}
				}
			 }
			switch(options.top)
			 {
				case "t":	pos.top=0;	break;
				case "b":pos.top=win_h-o_h;	break;
				case "m":pos.top=(win_h-o_h)/2;break;
				default:
					if(!pos.top)pos.top=obj.position().top;
			}
			return pos;
		};
		//当element在浏览器下拉过程中，自动跟随滚动
		this.autoFloat=function(element)
		{
			var timer=null;
			var top = element.position().top;
			element.css({
				"position": "absolute",
				"top":top
			});

			win.scroll(function() {
				 if(options.type=="absolute") {
					if(timer==null)
					{
						timer = setTimeout(function(){
							 var scrolls = win.scrollTop();
							 if (scrolls <= top) {
								 scrolls=top;
							 }
							element.stop().animate({"top":scrolls},300);

							timer=null;
						},50);
					 }else{
						element.css({position: "absolute",top: top});
					 }
				 }else{
					 var scrolls = win.scrollTop();
					 if (scrolls > top) {
						 if(ol.isIE6)
						 {
							 element[0].style.setExpression('top', '(document.documentElement || document.body).scrollTop + "px"');
						 }else{
							 element.css({position: "fixed", top: 0});
						 }
					 }else{
						 if(ol.isIE6)
						 {
							element[0].style.removeExpression("top");
						 }
						element.css({position: "absolute",top: top});
					 }
				 }


			});
		};

		this.Init=function(){
			//处理IE6的情况
			if(options.type=="fixed"&&ol.isIE6)
			{
				var css={};
				var h=$("html");
				if(!h.css("background-image")||h.css("background-image")=="none")css["background-image"]="url(about:blank)";
				//if($("body").css("background-attachment")!="fixed")css["background-attachment"]="fixed";
				h.css(css);
			}
			//top和left都为null 自动浮动
			if(options.top==null&&options.left==null)
			{
				this.autoFloat(element);
				return;
			}
			var pos=this.getPos(element);
			var css={top:pos.top,left:pos.left,zIndex:options.zIndex};
			var timer=null;
			var rePos=null;
			if (options.type=="absolute") {
				css.position="absolute";
				rePos=function(){
					if(timer==null)
					{
						var animate=true;
						if(options.top=="b"){
							//当在底部对齐时候，关闭动画效果，采用隐藏再显示的效果。
							animate=false;
						}
						if(!animate)element.stop().css("opacity",0);
						timer = setTimeout(function(){
							var pos=self.getPos(element);
							if(animate)
							{
								element.stop().animate({"top":win.scrollTop()+pos.top,"left":pos.left},100);//动画效果
							}else{
								element.css({"top":win.scrollTop()+pos.top,"left":pos.left}).stop().animate({"opacity":1},300);
							}
							timer=null;
						},400);
					}
				};//rePos end
				css.top+=win.scrollTop();
				css.left+=win.scrollLeft();
				win.scroll(rePos);
			}else{
				if(ol.isIE6)
				{
					css.position="absolute";
					element[0].style.setExpression('left', '(document.documentElement || document.body).scrollLeft+'+pos.left+'+"px"');
					element[0].style.setExpression('top', '(document.documentElement || document.body).scrollTop+'+pos.top+'+"px"');
					delete css["top"];
					delete css["left"];
					var timer=null;
					rePos=function(){
						if(timer!=null)return;
						setTimeout(function(){
							var pos=self.getPos(element);
							var style=element[0].style;
							style.removeExpression("top");
							style.removeExpression("left");

							style.setExpression('left', '(document.documentElement || document.body).scrollLeft+'+pos.left+'+"px"');
							style.setExpression('top', '(document.documentElement || document.body).scrollTop+'+pos.top+'+"px"');
							timer=null;
						},50);
					};
				}else{
					css.position="fixed";
					rePos=function(){
						var pos=self.getPos(element);
						element.css({"top":pos.top,"left":pos.left});
					};
				}
			}
			element.css(css);
			win.resize(rePos);
		};
        //1.初始化
		this.InitConfig();
		//2.定位
		this.Init();
	}


/*
 * 入口:
 * options:
 * {
 * top:
 * left:
 * zIndex:
 * type:
 * }
 * jQuery.fn.extend(object):
 * 扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
 * jQuery.fn.extend({
 *  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
  });
  
  $("input[type=checkbox]").check();
  $("input[type=radio]").uncheck();
 */
	$.fn["float"]=function(options){
		return this.each(function(){
			new $float($(this),options);
		});
	};
})(jQuery);

转载于:https://my.oschina.net/wrean/blog/125667