如何用mouse来移动层，我作一个，但是不精确，大家帮我看看

山尖美色 2003-01-24 12:03:08

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>

<script language="javascript">
/*var all=;
var flag=1;//变量flag用来控制“执行或终止执行函数Move()”
var act;
var xhd=0;//变量xhd为信号灯，用于控制“层”的移动方向
var car=false;
var currentX = currentY = 0;
var strtable="";
var strbody="";
var strfoot="";
var lastScrollX = 0; lastScrollY = 0;
var i=0,j=0;
var menu_name="";//all menu_name string
var menu_id="";//all menu_id string
var menuall=""; //all menu string
var whichIt = all.stamp;
var bDrag;
function Move()
{
if(xhd==0){
all.stamp.style.visibility=all.stamp.style.visibility;
all.stamp.style.pixelTop=document.body.scrollTop+178;
all.stamp.style.pixelLeft=document.body.scrollLeft+161;
}
else if(!car){
//all.stamp.style.visibility=all.stamp.style.visibility;
//alert();
all.stamp.style.pixelTop =all.stamp.style.pixelTop;
//all.stamp.style.pixelLeft+=5;
}

}
*/
var datelayerx,datelayery;
var bDrag;
bDrag=false;
var all=document.all;
function mousedown(){
datelayerx=window.event.clientX;
datelayery=window.event.clientY;
bDrag=true;
/* car=true;
grabIt();
*/
}
function document.onmousemove(){
//if(window.event.button==1){
all.stamp.style.top=window.event.clientX +document.body.scrollLeft+6;
all.stamp.style.left=window.event.clientY+ document.body.scrollTop+9;
document.all.x.value=window.event.clientX;
document.all.y.value=window.event.clientY;
document.all.x1.value=window.event.x;
document.all.y1.value=window.event.y;

document.all.x2.value=document.body.scrollLeft;
document.all.y2.value=document.body.scrollTop;

document.all.x3.value=all.stamp.offsetLeft;
document.all.y3.value=all.stamp.offsetTop;

document.all.x4.value=all.stamp.style.left;
document.all.y4.value=all.stamp.style.top;

// }
/* if(car){
moveIt();
xhd=1;
} */
//alert(window.event.button);
}
function DragEnd(){ /*结束日历拖动*/
bDrag=false;
}
/*
function mouseup(){
dropIt();
car=false;
}

function grabIt(e) {
whichIt =all.stamp;
while (whichIt.id.indexOf("stamp") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);

return true;
}

function moveIt(e) {
if (whichIt == null) { return false; }

newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY); currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX; whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop)
whichIt.style.pixelTop = document.body.scrollTop;
if(whichIt.style.pixelLeft < document.body.scrollLeft)
whichIt.style.pixelLeft = document.body.scrollLeft;
if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;

return false;
}

function dropIt() {
whichIt = null;
return true;
}
function tt(){

}*/

</script>
<style>
.move {
'cursor:default;
'cursor:move;
position:absolute;
'visibility:hidden;
visibillty:visible;
height:261px;
width:207px;
color:yellow;
border:#66FFCC 1px solid;
background-color:#D0FFF0;
left: 0px;
top: 0px;
}
</style>
<script language=javascript src="getdate.js"></script>
<input onfocus="setday(this)">
<div id="stamp" class="move" onMouseDown="mousedown()" onMouseup="DragEnd();">
sdfsdfsdfsdfsdfsdsfsdfsd<Br>
asdfasdfasdf<br>
asdfasdfASD<br>
</div>
<FORM NAME="test">
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y" SIZE="4"><br><hr>mouse
X: <INPUT TYPE="TEXT" NAME="x1" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y1" SIZE="4">
<br><hr>body
X: <INPUT TYPE="TEXT" NAME="x2" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y2" SIZE="4">
<br><hr>layle
X: <INPUT TYPE="TEXT" NAME="x3" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y3" SIZE="4">
<br><hr>layle1
X: <INPUT TYPE="TEXT" NAME="x4" SIZE="4"> Y: <INPUT
TYPUE="TEXT" NAME="y4" SIZE="4">
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>sdfsdf
</FORM>
</BODY>
</HTML>

...全文

21 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

山尖美色 2003-02-21

打赏
举报

over

山尖美色 2003-01-24

打赏
举报

那要怎么写呀！

flyycyu 2003-01-24

打赏
举报

移动也不用写得这么麻烦吧！

孟子E章 2003-01-24

打赏
举报

好像x,y方向的数翻了

zz315 2003-01-24

打赏
举报

设置属于当前文档的鼠标捕获对象。这是微软的解释，可能不大好理解。

其实说白了就是：当某个元素使用了该方法后，那么鼠标事件就会始终在这个元素上响应，而无论鼠标在页面的什么位置，直至使用releaseCapture()方法解除。

在上面的代码里的作用是：正常情况下，在拖移过程中，鼠标如果移动很快，就会滑出层的范围，那么onmousemove事件就不会在继续在层上响应了，那么也就不会继续跟着鼠标一起“走”了。

把上面那段代码中的setCapture去掉，然后快速拖移，就知道它的作用了。

山尖美色 2003-01-24