基于jquery的一個浮動框(擴展性比較好 )

更新時間：2010年08月27日 22:44:11 作者：

在用Maxthon的時候無意看到一個浮動框，把它改成基于jquery的，擴展性比較好，發(fā)來分享下。

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<style type="text/css"> 
body 
{ 
height:2000px; 
} 
.float_mx{ 
background:#CCC; 
width:100px; 
height:100px; 
display:none; 
} 
</style> 
</head> 
<body> 
<div class="float_mx"> 
在此添加內(nèi)容 
</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
(function($) { 
$.fn.scrollBox = function(options){ 
var defaultOptions = { 
speed: 0.1, //加速 
time: 16, //移動速度 
top: 200, //默認頂部 
align: 'right', //浮動位置，可選左、右 
mix: 0 //邊距 
}; 
var options = $.extend(defaultOptions, options); 
this.each(function(){ 
var obj = $(this); 
init(); 
function init(){ 
obj.css('display', 'block'); 
obj.css('position', 'absolute'); 
obj.css(options.align, options.mix); 
obj.css('top', options.top+'px'); 
obj.css('z-index', '99'); 
move(); 
} 
function back() { 
acceleration = options.speed; 
time = options.time; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x = Math.max(x1, x2); 
var y = Math.max(y1, y2); 
var speed = acceleration; 
return { 
l: x, 
t: y, 
s: speed 
}; 
}; 

function move(){ 
var tip = obj; 
var old = options.top; 
var pos = back().t; 
pos = pos - $(tip).Coordinate().y + options.top; 
pos = $(tip).Coordinate().y + pos / 10; 
if (pos < options.top) { 
pos = options.top; 
} 
if (pos != old) { 
tip.css('top',pos + "px"); 
} 
old = pos; 
window.setTimeout(function(){move();}, options.time); 
}; 
}); 
}; 
$.fn.Coordinate = function(){ 
var E = $(this)[0]; 
var C = E.offsetTop; 
var B = E.offsetLeft; 
var A = E.offsetWidth; 
var D = E.offsetHeight; 
while (E = E.offsetParent) { 
C += E.offsetTop; 
B += E.offsetLeft; 
} 
return { 
x: B, 
y: C, 
w: A, 
h: D 
}; 
}; 
})(jQuery); 
$('.float_mx').scrollBox(); 
</script> 
</body> 
</html> 

把下面這段代理放到單獨的js文件中，代碼中的css代碼可以刪掉，display設為none，是為了避免在頁面未加載完，顯示不正確的問題。

復制代碼代碼如下:

 
(function($) { 
$.fn.scrollBox = function(options){ 
var defaultOptions = { 
speed: 0.1, //加速 
time: 16, //移動速度 
top: 200, //默認頂部 
align: 'right', //浮動位置，可選左、右 
mix: 0 //邊距 
}; 
var options = $.extend(defaultOptions, options); 
this.each(function(){ 
var obj = $(this); 
init(); 
function init(){ 
obj.css('display', 'block'); 
obj.css('position', 'absolute'); 
obj.css(options.align, options.mix); 
obj.css('top', options.top+'px'); 
obj.css('z-index', '99'); 
move(); 
} 
function back() { 
acceleration = options.speed; 
time = options.time; 
var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x = Math.max(x1, x2); 
var y = Math.max(y1, y2); 
var speed = acceleration; 
return { 
l: x, 
t: y, 
s: speed 
}; 
}; 

function move(){ 
var tip = obj; 
var old = options.top; 
var pos = back().t; 
pos = pos - $(tip).Coordinate().y + options.top; 
pos = $(tip).Coordinate().y + pos / 10; 
if (pos < options.top) { 
pos = options.top; 
} 
if (pos != old) { 
tip.css('top',pos + "px"); 
} 
old = pos; 
window.setTimeout(function(){move();}, options.time); 
}; 
}); 
}; 
$.fn.Coordinate = function(){ 
var E = $(this)[0]; 
var C = E.offsetTop; 
var B = E.offsetLeft; 
var A = E.offsetWidth; 
var D = E.offsetHeight; 
while (E = E.offsetParent) { 
C += E.offsetTop; 
B += E.offsetLeft; 
} 
return { 
x: B, 
y: C, 
w: A, 
h: D 
}; 
}; 
})(jQuery); 