js jQuery.float
10134 ワード
<!-- 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);