写了一个网页元素移动代码,但是只能往右边移动.不解.

主题：写了一个网页元素移动代码,但是只能往右边移动.不解.

yanjinbin [专家分：130] 发布于 2007-01-11 12:08:00

写了一个网页元素移动代码,但是只能往右边移动,不能往左边移动,奇怪了.
代码如下:
<html>
<head><title>移动网页元素</title>
<script language="javascript">
function zuobiao(){
var abc=document.getElementById("layer1");
var shubiaox=window.event.clientX ; //鼠标点击时所处document的位置
var shubiaox2=window.event.offsetX;//鼠标对于事件对象内的位置
abc.style.left=(shubiaox-shubiaox2)+"px";
}
</script>
<style type="text/css">

</style>
</head>
<body>
<div id="Layer1" onmousemove="zuobiao()"></div>
</body>
</html>

大家可以实验下,只能往右边移动,郁闷了.
是因为shubiaox-shubiaox2值一直大不会小,所以一直右移动,而不会左移动.
但为什么这个值会只大不小了,希望大家帮忙解答下.

本帖地址： http://bbs.pfan.cn/post/213675.html

回复列表（共12个回复）

沙发

wangsdong [专家分：21390] 发布于 2007-01-11 12:18:00

abc.style.left=(150-shubiaox2)+"px";
试试这个

板凳

yanjinbin [专家分：130] 发布于 2007-01-11 14:05:00

用这个常量代替shubiaox是可以左右移动,但为什么用这个变量就不行呢.
你这个是定点在150PX两边移动,我要的是DIV也要跟随鼠标移动啊.
望请帮忙解决下这个难题.

3 楼

yanjinbin [专家分：130] 发布于 2007-01-11 14:11:00

看来都是这个shubiaox变量的问题了.
代码改成这样:abc.style.left=shubiaox+"px";
他还是只能往右移动,因该怎么改才能让可以往左边移动呢.

4 楼

yanjinbin [专家分：130] 发布于 2007-01-11 14:25:00

解决一半了,关键是shubiaox2是要一个常量.
shubiaox2=shubiaox-abc.style.left;
现在关键是如何取的abc.style.left这个值了,也就是如何取的#layer1{}里面的值呢.求解....

5 楼

yanjinbin [专家分：130] 发布于 2007-01-11 15:01:00

function zuobiao(){
var abc=document.getElementById("Layer1");
var shubiaox=window.event.clientX ; //鼠标点击时所处document的位置
var shubiaox2=shubiaox-parseInt(abc.currentStyle.left);//currentStyle用来取的内部继承样式表的值
alert(shubiaox2);
abc.style.left=(shubiaox-shubiaox2)+"px";
}
如果把shubiaox2设置成一个常量就能左右移动,现在我们用一个变量来代替他,
alert(shubiaox2)会显示值但就是不能移动呢.不解,
请多指教

6 楼

yanjinbin [专家分：130] 发布于 2007-01-11 15:15:00

计算错误,
我是这样想的:shubiaox是鼠标位置,shubiaox2(用当前鼠标位置-div元素与网页之间的距离)是鼠标和目标对象左边框位置.
然后用shubiaox-shubiaox2就是左边框与网页之间的距离(这个值是不断变化的).
但事实上shubiaox-shubiaox2得到的是网页与边框之间的值就是一个初始化值60PX而不会改变呢.
现在就是如何把这个值变化,而不是保持常量呢.求解.....

7 楼

yanjinbin [专家分：130] 发布于 2007-01-11 15:26:00

这个shubiaox2因该要是一个常量,而不会随着鼠标,移动而改变.
因该在鼠标第一次移动进来就计算并固定某个值,而不会再改变.
但因该怎么计算第一次鼠标进来的值呢,而后面的值不会变呢.

8 楼

yanjinbin [专家分：130] 发布于 2007-01-11 15:51:00

终于搞定了:
<html>
<head><title>移动网页元素</title>
<script language="javascript">
function zhuce(){
var abc=document.getElementById("Layer1");
var deltax=window.event.clientX-parseInt(abc.currentStyle.left);
abc.attachEvent("onmousemove",yidong);//为鼠标移动注册一个事件
function yidong(){
abc.style.left=window.event.clientX-deltax+"px";
}
}
</script>
<style type="text/css">

</style>
</head>
<body onLoad="jiazai()">
<div id="Layer1" onClick="zhuce()"></div>
</body>
</html>

9 楼

yanjinbin [专家分：130] 发布于 2007-01-11 15:54:00

怎么解决shubiaox2是一个定值呢,就是先注册一个过程计算出shubiaox2的值(deltax),
然后在注册一个鼠标移动事件.
现在我在想怎么停止他呢.

10 楼

yanjinbin [专家分：130] 发布于 2007-01-11 16:08:00

<html>
<head><title>移动网页元素</title>
<script language="javascript">
function zhuce(){
var abc=document.getElementById("Layer1");
var deltax=window.event.clientX-parseInt(abc.currentStyle.left);//deltax这要是一个固定的值
var deltay=window.event.clientX-parseInt(abc.currentStyle.top);
abc.attachEvent("onmousemove",yidong);//为鼠标移动注册一个事件
abc.attachEvent("onmouseup",zhuxiao);//为鼠标释放注册一个事件,来注销移动事件
abc.cancelBubble=true;//防止事件在传播
function yidong(){
abc.style.left=window.event.clientX-deltax+"px";
abc.style.top=window.event.clientY-deltay+"px";
abc.cancelBubble=true;//防止事件在传播
}
function zhuxiao(){
abc.detachEvent("onmousemove",yidong);//鼠标释放注销这两个事件
abc.detachEvent("onmouseup",zhuxiao);
abc.cancelBubble=true;//防止事件在传播
}
}
</script>
<style type="text/css">

</style>
</head>
<body onLoad="jiazai()">
<div id="Layer1" onmousedown="zhuce()"></div>
</body>
</html>
完全OK了,鼠标单击移动,释放就停止.
基本都是偶一个人,自己提问,自己回答,汗啊.

我来回复

您尚未登录，请登录后再回复。点此登录或注册

主题：写了一个网页元素移动代码,但是只能往右边移动.不解.

回复列表（共12个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

主题：写了一个网页元素移动代码,但是只能往右边移动.不解.

回复列表 （共12个回复）

我来回复

程序员工具箱 new

代码片段

本版新帖

回复列表（共12个回复）