精华区 [关闭][返回]

当前位置:网易精华区>>讨论区精华>>网络专区>>● 网站建设>>盖世神功 — 网站建设技术>>Java Script — 来一杯热咖啡>>如何拖动层:回复前面的问题

主题:如何拖动层:回复前面的问题
发信人: fansiren()
整理人: eagle(2000-09-30 01:03:46), 站内信件
下面是一个完整的HTML文档,你慢慢看吧。呵呵!
欢迎访问我的主页:http://fazai.shangdu.net/

<html>
<head>
<script>
var down = false;
function UpMouse(){
  down = false;
}
var startX = 0; startY = 0;startLeft = 0;startTop = 0;
var thelayer;
function MoveLayer(){
  if (down){
    thelayer.style.pixelLeft = startLeft+event.clientX-startX;
    thelayer.style.pixelTop = startTop+event.clientY-startY;
    formview.viewpos.value = " X:"+event.clientX+" Y:"+event.clientY+"
   startX:"+startX+"  startY:"+startY;
  }//可以观察鼠标的运动
}
function DownMouse(){
  if (!document.all) return true;//暂时只支持4.0以上的IE浏览器
  if (event.srcElement.name=="layermove"){//对应要拖动的层的name
    thelayer = event.srcElement;
    down = true;
    startX = event.clientX;
    startY = event.clientY;
    startLeft = thelayer.style.pixelLeft;
    startTop = thelayer.style.pixelTop;
  }
}
</script>
</head>
<body onmousedown="DownMouse()" onmousemove="MoveLayer()" onmouseup="U
pMouse()">
<form name="formview">
<center>
<input name="viewpos" value=" 这里显示鼠标的运动轨迹" size="37" style
="border=0;color:white;background:blue">
</center><!--隐藏了文本框的边框,这也算是一个DHTML的应用吧。呵呵!-->

</form>
<div name="layermove" style="position:absolute;top:100pt;left:215pt;cu
rsor:hand;background:#f5f5ff;width:150pt;height:100pt">
<p align="center"><br><br>这个层可以拖动吔!<br><br>不信你试试看!</p>

</div>
</body>
</html>

--
每日更新,欢迎朋友们光临:
http://fazai.shangdu.net/

※ 修改:.fansiren 于 Feb 28 21:15:19 修改本文.[FROM: 202.103.105.5]
※ 来源:.月光软件站 http://www.moon-soft.com.[FROM: 202.103.105.5]

[关闭][返回]