<html>
<head>
<script>
var down = false;
function UpMouse(){
down = false;
}
var startX = 0; startY = 0;startLeft = 0;startTop = 0;
function MoveLayer(form){ if (down){
thelayer.style.pixelLeft = startLeft+event.clientX-startX;
thelayer.style.pixelTop = startTop+event.clientY-startY;
form.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="UpMouse()">
<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;cursor:hand;background:#f5f5ff;width:150pt;height:100pt">
<p align="center">
<br><br>这个层可以拖动?!<br><br>不信你试试看!
</p>
</div>
</body>
</html><B></B>
<head>
<script>
var down = false;
function UpMouse(){
down = false;
}
var startX = 0; startY = 0;startLeft = 0;startTop = 0;
function MoveLayer(form){ if (down){
thelayer.style.pixelLeft = startLeft+event.clientX-startX;
thelayer.style.pixelTop = startTop+event.clientY-startY;
form.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="UpMouse()">
<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;cursor:hand;background:#f5f5ff;width:150pt;height:100pt">
<p align="center">
<br><br>这个层可以拖动?!<br><br>不信你试试看!
</p>
</div>
</body>
</html><B></B>
解决方案 »
- 关于jQuery (JavaScript)代码运行过程的疑问,求原理性解释,有相关资料或链接推荐也好
- window.open()打的新窗口覆盖在老窗口上 兄弟们帮我
- 帮我看下这段简单代码是否有错
- 如何让文本框只能输入人民币,即两位浮点数?
- 有没有办法用js取得打开的IE窗口列表的句柄?并对这些窗口一一关闭?
- 页面生成完成后,如何调换物件的位置?
- thanks.如何动态改变text的maxlength属性
- iframe点击在另一iframe中打开网页的问题
- 如何在html中显示另一个文件中的记录?有上一页,下一页按钮,每次显示10条,点击换页显示新的内容?
- 如何,用javascript使超连接失效!
- ¥¥¥¥如何在空白处通过双击连接到另一个页面呢?
- 在线等待----怎样将弹出来的页面真正最大化
仁兄,你写的代码运行有问题,不能显示鼠标的运动
请改好啦,谢谢了!我正在参考你写的。