Jqueryはウインドウサイズによってブラウズ位置に影響がありません。DIVは絶対位置で変更できます。メニューの相対位置は変わりません。
5617 ワード
<!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>