<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Jquery 随窗口改变大小不会影响浏览位置,DIV可以在绝对的位置不变.菜单相对位置不变title>
<meta name="Author" content="Geovin Du 塗聚文"/>
<meta name="Keywords" content="捷为工作室"/>
<meta name="Description" content="缔友计算机信息技术有限公司"/>
<script type="text/javascript" src="http://www.dupcit.com/js/floating-1.7.js"></script>
<script language="javascript" type="text/javascript" src="http://www.dupcit.com/js/jquery.js"></script>
<script language="javascript" type="text/javascript">
$(window).resize(function() { //alert("dsds");
window.location.reload();
});
</script>
</head>
<body>
<table width="995" border="0" cellspacing="0" cellpadding="0" align="center" style="background-color:#CCCCCC;height:1100px;">
<tr>
<td width="300px;">.l;lpll;l;l;
</td>
<td width="300px;">
<div style="position:absolute;" id="dupcit">gegege</div>
</td>
<td width="100px;"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id="floatdiv" style="
position:absolute;
200px;height:350px;top:10px;right:10px;
padding:16px;background:#FFFFFF;
border:2px solid #2266AA;
z-index:100">
This is a floating javascript menu.
<div style="padding:16px">
Just imagine. This could be your floating menu.
<br/><br/>
<a href="/" title="Go to the main page.">dupcit.com</a><br/>
<a href="/javascript/blocks/" style="padding-left:15px">Building blocks scripts</a><br/>
<a href="/javascript/forms/" style="padding-left:15px">Forms & validation</a><br/>
<a href="/javascript/navigation/" style="padding-left:15px">Navigation scripts</a><br/>
<a href="/javascript/window/" style="padding-left:15px">Window management</a><br/>
</div>
</div>
<script type="text/javascript">
var X1 = $('#dupcit').offset().top;
var Y1 = $('#dupcit').offset().left;
document.write(X1+"<br />");
document.write(Y1+"<br />");
floatingMenu.add('floatdiv',
{
// Represents distance from left or right browser window
// border depending upon property used. Only one should be
// specified.
targetLeft: Y1,
//targetRight:
// Represents distance from top or bottom browser window
// border depending upon property used. Only one should be
// specified.
targetTop: 10,
// targetBottom: 0,
// Uncomment one of those if you need centering on
// X- or Y- axis.
// centerX: true,
// centerY: true,
// Remove this one if you don't want snap effect
snap: true
});
</script>
<script type="text/javascript">
var X = $('#dupcit').offset().top;
var Y = $('#dupcit').offset().left;
document.write(X+"<br />");
document.write(Y+"<br />");
//获取相对(父元素)位置:
var C = $('#dupcit').position().top;
var D = $('#dupcit').position().left;
document.write(C+"<br />");
document.write(D);
</script>
</body>
</html>
注:IE下会出现死循环的更新,还是有BUG.可以把当窗体变化时加载窗体的代码注释.也可以另方法解决.