Jquery 随窗口改变大小不会影响浏览位置,DIV可以在绝对的位置不变.菜单相对位置不变 

<!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;   
    width: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.可以把当窗体变化时加载窗体的代码注释.也可以另方法解决.
posted @ 2011-05-16 13:29  ®Geovin Du Dream Park™  阅读(1454)  评论(0)    收藏  举报