中国IT动力,最新最全的IT技术教程
最新100篇 | 推荐100篇 | 专题100篇 | 排行榜 | 搜索 | 在线API文档 | 网通镜像
首 页 | 程序开发 | 操作系统 | 软件应用 | 图形图象 | 网络应用 | 精文荟萃 | 教育认证 | 硬件维护 | 未整理篇 | 站长教程
ASP JS PHP工程 ASP.NET 网站建设 UML J2EESUN .NET VC VB VFP 网络维护 数据库 DB2 SQL2000 Oracle Mysql
服务器 Win2000 Office C DreamWeaver FireWorks Flash PhotoShop 上网宝典 CorelDraw 协议大全 网络安全 微软认证
硬件维护  CPU  主板  硬盘  内存  显卡  显示器  键盘鼠标  声卡音箱  打印机  机箱电源  BIOS  网卡  C#  Java  Delphi  vs.net2005
  当前位置:> 未整理篇
取鼠标与控件的位置
作者:colayungnew 时间:2003-02-10 11:08 出处:互联网 责编:chinaitpower
              摘要:取鼠标与控件的位置

<script>
    var canmove=false;
 var leftX=0,topY=0,newX=0,newY=0;
        function showpx(){
           var obj=document.getElementById("tbl1");
           var objp=obj.offsetParent
           alert("Top:" + obj.offsetTop + "Left:" +obj.offsetLeft + "px" + objp.offsetTop + "py" +

objp.offsetLeft );       
        }


 function moveAble(){
  if(event.srcElement.id=="moveArea")
     canmove=true;
              leftX=(event.clientX+document.body.scrollLeft)-wizard.style.pixelLeft;
     topY=(event.clientY+document.body.scrollTop)-wizard.style.pixelTop;
     //wizard.style.pixelLeft = wizard.offsetLeft;
            //wizard.style.pixelTop = wizard.offsetTop;
                   //event.clientX,event.clientY:分别表示当前事件的鼠标在屏幕浏览区的位置
                   //wizard.style.pixelLeft,wizard.style.pixelTop: 表示指定元素的XY点的值
                   //wizard.offsetLeft | wizard.offsetLeft与
                   //  wizard.style.pixelLeft | wizard.style.pixelTop的值相同,应该在一些场合下是不同的?
                   //注意大小写,
 }
 function moveDisable(){
    canmove=false;
 }
 function move(){
    if(canmove){
     newX = (event.clientX + document.body.scrollLeft);
         newY = (event.clientY + document.body.scrollTop);
     wizard.style.pixelLeft=newX-leftX;
     wizard.style.pixelTop=newY-topY;
     event.returnValue = false;
    }
 }
 document.onmousedown=moveAble;
 document.onmouseup=moveDisable;
 document.onmousemove=move;
 window.onresize=showpx;

  </script>
  <table id="wizard" cellspacing="0" style="position:absolute;left:300;top:150;background:#EEEEEE;border:1 solid

#CCCCCC">
     <tr bgcolor="black" id="moveArea">
   <td align="right"  id="moveArea">
     <font color='white'>最新消息</font>
   </td>
   <td align="right" id="moveArea">
     <a href="#" onclick="wizard.style.display='none'"><font color='white'>[关闭]</font></a>
   </td>
      </tr>
 <tr>
   <td>
     <img src='../images/girl_s.gif'>
   </td>
   <td valign="top"><br><br>
     <a href='../news/MessView.net?IDMessage=11147'><b><font

color='red'>10月23日WINDOWS主机升级通知!</font></b><br>[2004-10-21]</a><br><a

href='../news/MessView.net?IDMessage=11060'><b><font

color='red'>CN代理价格再一次下调,低至行业之最!</font></b><br>[2004-10-18]</a><br><a

href='../news/MessView.net?IDMessage=11059'><b><font

color='red'>行业惊暴,买国家顶级CN域名送国际域名!</font></b><br>[2004-10-18]</a><br>   </td>
 </tr>
   </table>
&nbsp;&nbsp;&nbsp;
<table width='100%'>
<tr>
  <td width='20%'>
<table id=tbl2><tr><td>test1</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl1><tr><td>test2</td></tr></table>
  </td>
  <td width='20%'>
<table id=tbl3><tr><td>test3</td></tr></table>
  </td>
</tr>
</table>


关闭本页
 
首页 | 投资与合作 | 服务条款 | 隐私政策 | 收藏本站 | 设为首页 | 新用户注册 | 免责声明 | 使用帮助
Copyright ©2005-2008 chinaitpower.com All rights reserved. www.chinaitpower.com 版权所有