?
事件
<body onmousedown="show_coords(event)">
function show_coords(ev){
? ? ? ? alert("X 坐标: " + ev.clientX + ", Y 坐标: " + ev.screenX)
}
?
遮罩滚动层
<html>
<head>
<script language="javascript" type="text/javascript" >
? ? var timerID = 0;//必须的
? ? function StartGO(){
? ? ? ? ? ? var bgObj0=document.createElement("div");?
? ? ? ? bgObj0.style.position="absolute";?
? ? ? ? bgObj0.style.backgroundColor="#eeeeee";
? ? ? ? if(document.all){
? ? ? ? ? ? bgObj0.style.filter = "alpha(opacity=50)";
? ? ? ? }else{
? ? ? ? ? ? bgObj0.style.MozOpacity = 0.5;
? ? ? ? ? ? bgObj0.style.opacity = 0.5;
? ? ? ? }
? ? ? ? bgObj0.style.top = "0px"; ??
? ? ? ? bgObj0.style.left = "0px";?
? ? ? ? bgObj0.style.width = "100%" ?
? ? ? ? var s_height=document.body.scrollHeight;?
? ? ? ? ? ? ? ? if(s_height<window.screen.availHeight){
? ? ? ? ? ? ? ? ? ? ? ? s_height=window.screen.availHeight;?
? ? ? ? ? ? ? ? }?
? ? ? ? ? ? ? ? bgObj0.style.height=s_height+"px"//设置高度?
? ? ? ? bgObj0.style.zIndex = 1000;
?
?
? ? ? ? var bgObj=document.createElement("div");?
? ? ? ? bgObj.style.position="absolute";?
? ? ? ? bgObj.style.backgroundColor="#ff0000";
? ? ? ? bgObj.style.top = "300px"; ??
? ? ? ? bgObj.style.left = "300px";?
? ? ? ? bgObj.style.width = "300px" ?
? ? ? ? bgObj.style.height = "300px"
? ? ? ? bgObj.style.zIndex = 1001; ? ?
? ? ? ? document.body.appendChild(bgObj0);?
? ? ? ? document.body.appendChild(bgObj);?
? ? ? ? //关闭按钮//也可以这样写啊？
? ? ? ? var c = document.createElement("div");
? ? ? ? c.innerHTML = "关闭";
? ? ? ? c.style.cssText = "text-decoration:underline; cursor:pointer;";
? ? ? ? c.onclick = function(){
? ? ? ? ? ? ? ? document.body.removeChild(bgObj);
? ? ? ? ? ? document.body.removeChild(bgObj0);
? ? ? ? ? ? clearInterval(timerID);//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
? ? ? ? ? ? document.body.scrollTop="0px";
? ? ? ? };
? ? ? ? bgObj.appendChild(c);
?
? ? ? ? clearInterval(timerID);
? ? ? ? //clearInterval() 方法可取消由 setInterval() 设置的 timeout。
? ? ? ? timerID = setInterval(function(){move(bgObj);}, 10);
? ? ? ? //timerID = setInterval(move,10,bgObj);等效于上面的
? ? ? ? alert(timerID);//如果页面不刷新timerID为2,3,4,5递增的
? ? ? ? //setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
? ? ? ? ? ? ? ? //setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
?
? ? }
? ? function move(obj){
? ? ? ? if(obj){
? ? ? ? ? ? obj.style.top = document.body.scrollTop +300+ "px";
? ? ? ? }
? ? }
</script>?
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body >
? ? <div id="content">
? ? ? ? ? ?<input type="button" value="OK" id="btnOK" onclick="StartGO()"/> <br>
? ? ? ? ? ?大家好！<br>
? ? ? ? ? ?底部有数字内容！
? ? ? ? ? ?滚动遮罩层
? ? ? ? ? ?指定遮罩层
? ? ? ?</div>
? ? <div style="margin-top:1000px">123</div>
</body>
</html>
?
js层：
<html>
? ? ? ? <head>
<script language="javascript" type="text/javascript">
? ? ? ? ? ? ? ? function openFloat(obj) {
?
? ? ? ? ? ? ? ? // ? ? ? ?alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop); ? ? ? ?//[object HTMLDivElement]160-262
?
? ? ? ? ? ? ? ? ? ? ? ? floatArea = document.getElementById("ok");
?
? ? ? ? ? ? ? ? ? ? ? ? var leftpos = 0,toppos = 0;
? ? ? ? ? ? ? ? ? ? ? ? var pObject = obj.offsetParent;
? ? ? ? ? ? ? ? ? ? ? ? //if (pObject){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //leftpos += pObject.offsetLeft;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //toppos += pObject.offsetTop;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //alert( pObject+pObject.offsetLeft+"-"+pObject.offsetTop);//[object HTMLBodyElement]0-0
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //alert(obj+obj.offsetLeft+"-"+obj.offsetTop); ? ? ? ? ? ? ? ?//[object HTMLInputElement]190-292
? ? ? ? ? ? ? ? ? ? ? ? //}
? ? ? ? ? ? ? ? ? ? ? ? //alert(leftpos);
? ? ? ? ? ? ? ? ? ? ? ? while(pObject){//必须的，能否合并于if，用coupon_release.html测试？？？？？？？？？？
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? leftpos += pObject.offsetLeft;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? toppos += pObject.offsetTop;
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? alert(pObject+leftpos+"-"+pObject.offsetLeft);
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? pObject = pObject.offsetParent;
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? //alert(0);
? ? ? ? ? ? ? ? ? ? ? ? //alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]160-262
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.left = (leftpos) + "px";
? ? ? ? ? ? ? ? ? ? ? ? alert(floatArea.style.left);
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.top = (obj.offsetTop + toppos + obj.offsetHeight - 1) + "px";
? ? ? ? ? ? ? ? ? ? ? ? //alert(floatArea+floatArea.offsetLeft+"-"+floatArea.offsetTop);//[object HTMLDivElement]190-312
?
?
? ? ? ? ? ? ? ? ? ? ? ? floatArea.innerHTML="<a href='javascript:closeFloat();'>关闭</a><br>test层中表单<br>"
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? +"<form><input type='text' name='name' id='name'/><br></form>"
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.width = "300px";
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.height = "300px";
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.border = "#ff0000 1px solid";
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.background="#eeeeee";
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.display = "block";
? ? ? ? ? ? ? ? }?
?
? ? ? ? ? ? ? ? function closeFloat() {
? ? ? ? ? ? ? ? ? ? ? ? floatArea = document.getElementById("ok");
? ? ? ? ? ? ? ? ? ? ? ? floatArea.innerHTML = "";
? ? ? ? ? ? ? ? ? ? ? ? floatArea.style.display = "none";
? ? ? ? ? ? ? ? }
</script>
? ? ? ? </head>
<body >
? ? ? ? <from style="position:relative;float:left;margin-left:50px;margin-top:50px;border:#ff0000 1px solid">
? ? ? ? ? ? ? ? <h1>测试DIV层</h1>
? ? ? ? ? ? ? ? <input type="text" name="name" id="name"/><br>
? ? ? ? ? ? ? ? <div style="position:relative;float:left;margin-left:30px;margin-top:30px;border:#ff0000 1px solid">
?
? ? ? ? ? ? ? ? ? ? ? ? <div id="sub" style="position:relative;float:left;margin-left:100px;margin-top:100px;border:#ff0000 1px solid">
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <input type="button" value="test" onclick="openFloat(this)"/><br>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? hello,wnj<br>
? ? ? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? ? ? ? ? <div id="ok" style="position:relative;background-color:#eeeeee;display:none"></div>
? ? ? ? ? ? ? ? </div>
?
? ? ? ? </from>
</body>
</html>