<!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>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isStart; //获取鼠标单击时的坐标x,y
var xMouseDown;
var yMouseDown;
function downMouse(){
isStart = true;
if (isStart) {
//鼠标起始位置
xMouseDown = window.event.clientX;
yMouseDown = window.event.clientY;
}
}
//结束事件
function upMouse() {
isStart = false;
}
//拖动
var xMouseMove;
var yMouseMove;
var left;
var top;
function move() {
if (isStart) {
//鼠标当前位置
xMouseMove = window.event.clientX;
yMouseMove = window.event.clientY;
//计算鼠标移动距离
left = xMouseMove - xMouseDown;
top = yMouseMove - yMouseDown;
document.getElementById("pad").style.left = document.getElementById("pad").style.pixelLeft + left;
document.getElementById("pad").style.top = document.getElementById("pad").style.pixelTop + top;
}
}
function textMove() {
document.onmousedown = downMouse;
document.onmousemove = move;
document.onmouseup = upMouse;
}
//-->
</SCRIPT>
<BODY>
<div id="pad" style="width:100px;height:100px;left:10px;top:160px;background-color:#ff0000;position:absolute;z-index:100;" onmousedown="textMove()"></div>
</BODY>
</HTML>这段代码中,每一次onmousemove操作时,就不断执行move()函数,这样导致鼠标移动一段距离后,DIV层不断以鼠标移动的相对距离来改变层的位置,如何才能DIV层只执行1次移动,感觉就像是10加一个数,我只需要它加一次就行了,可是这段代码就是在不停地重复累加。需要怎么修改代码?
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isStart; //获取鼠标单击时的坐标x,y
var xMouseDown;
var yMouseDown;
function downMouse(){
isStart = true;
if (isStart) {
//鼠标起始位置
xMouseDown = window.event.clientX;
yMouseDown = window.event.clientY;
}
}
//结束事件
function upMouse() {
isStart = false;
}
//拖动
var xMouseMove;
var yMouseMove;
var left;
var top;
function move() {
if (isStart) {
//鼠标当前位置
xMouseMove = window.event.clientX;
yMouseMove = window.event.clientY;
//计算鼠标移动距离
left = xMouseMove - xMouseDown;
top = yMouseMove - yMouseDown;
document.getElementById("pad").style.left = document.getElementById("pad").style.pixelLeft + left;
document.getElementById("pad").style.top = document.getElementById("pad").style.pixelTop + top;
}
}
function textMove() {
document.onmousedown = downMouse;
document.onmousemove = move;
document.onmouseup = upMouse;
}
//-->
</SCRIPT>
<BODY>
<div id="pad" style="width:100px;height:100px;left:10px;top:160px;background-color:#ff0000;position:absolute;z-index:100;" onmousedown="textMove()"></div>
</BODY>
</HTML>这段代码中,每一次onmousemove操作时,就不断执行move()函数,这样导致鼠标移动一段距离后,DIV层不断以鼠标移动的相对距离来改变层的位置,如何才能DIV层只执行1次移动,感觉就像是10加一个数,我只需要它加一次就行了,可是这段代码就是在不停地重复累加。需要怎么修改代码?
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css"> </style>
</HEAD> <BODY>
<div id="pad" style=" cursor:move;width:100px;height:100px;left:10px;top:160px;background-color:#ff0000;position:absolute;z-index:100; " onmousedown="textMove(this)" ></div>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var isStart;//获取鼠标单击时的坐标x,y
var xMouseDown=null;
var yMouseDown=null;
function downMouse(e,obj){
isStart = true;
if (isStart) {
//鼠标起始位置
obj.setCapture();
xMouseDown = e.clientX ;
yMouseDown =e.clientY ;
}
}//结束事件
function upMouse(obj) {
isStart = false;
obj.releaseCapture();
}//拖动
var xMouseMove;
var yMouseMove;
var left;
var top;function move(e) {
if (isStart) {
//鼠标当前位置
xMouseMove = e.clientX;
yMouseMove = e.clientY;
//计算鼠标移动距离
left = xMouseMove - xMouseDown;
top = yMouseMove - yMouseDown;
document.getElementById("pad").style.left = document.documentElement.scrollLeft+ left+"px";
document.getElementById("pad").style.top = document.documentElement.scrollTop+ top+'px';
}
}function textMove(obj) {
window.onmousedown=function(e){
downMouse(e,obj);
};
window.onmousemove=move;
window.onmouseup=function(){
upMouse(obj);
};
}
//-->
</SCRIPT>
</HTML>