移动

一般来说给 CSS-P 元素指定一个新的地址(在两种浏览器中)并不存在兼容性的问题.

移动一个名为 "myelement" 的元素到坐标 (100,50), 你只需指定新的左右值:

myelement.left = 100
myelement.top = 50
不要忘记myelement必须是个被如下定义的指针变量:
function init() {
	if (ns4) myelement = document.myelementDiv
	if (ie4) myelement = myelementDiv.style
}

从现在开始, 这段代码就成为所有示例的一部分了, 切记!

如我所说, 指定一个新的位置不会有兼容问题, 但是在获取一个元素的当前位置时却会产生问题. 这是由于 IE 在被定位时其坐标值以"px"作为结尾(就象我们在 通用 Javascript 的例句中见到的那样).

要去除"px"值, 就需要把坐标值认定为一个整数.

因此原来的代码:

myelement.left

就必须改写为:

parseInt(myelement.left)

例如, 如果你想以当前的左端值和上端值为坐标弹出一个警示窗口, 你就应该这样写:

alert(parseInt(myelement.left) + ", " + parseInt(myelement.top))

添加新属性

每次都在变量前面添加 parseInt() 将使你厌烦不堪. 不久你就会问自己是否还有更好的方法... 我想我的回答会让你满意.

你可以在指针变量前不断添加更多的属性, 或叫它对象(object), 从现在开始我将这么称呼它.

我的建议是分别按左右属性保留元素的现有坐标, 然后直接指定其新属性. 我是这样设定现有坐标的:

myelement.xpos = parseInt(myelement.left)
myelement.ypos = parseInt(myelement.top)

现在, 如果你想得到左端和上端的位置, 只需分别查看myelement.xposmyelement.ypos的值即可. 新的 alert() 如下所示:

alert(myelement.xpos + "," + myelement.ypos)

有什么问题吗?

当你一旦希望改变元素的位置, 首先必须改变xposypos的值. 然后将左端和上端分别置为与 xpos 和 ypos 相等的值. 如:

function move() {
	myelement.xpos = 200
	myelement.ypos = -40
	myelement.left = myelement.xpos
	myelement.top = myelement.ypos
}

你必须保持 xpos 和 ypos 的值与左端上端的值同步变化. 这样当你检查myelement.xpos时, 你会很清楚它与myelement.left是相同的.

点击这里将能看到运用这一技术的示例.

这并非太难, 不是吗? 此方法将成为后面所有示例中的主要原则. 这些额外的变量也许有点令人生厌, 可一旦你遇到棘手的问题, 它将对你的编写工作大有裨益.


附注:
你也许会感到奇怪为什么我用xposypos作为属性而不把它简化为xy... 我有我的道理. 一个并不广为人知的事实是 Netscape 的 CSS-P 中已包含了这两个属性. 我发现如果你使用xy, 那么所有的值将总是以整数计. 你也许想"谁会在意呢?"... 但在有些情况下你所需要存储的 left 和 top 当前值并非仅仅是整数(例如包括分数及其它的实数), 这也正是用xy无法做到的.

普通函数 Move

在最后一个例子中我硬性规定了物体的运动 -- 我为每个运动分别写了函数. 如果你有许多不同位置的不同的层, 那么你就无须一口气写很多函数. 所以我们所能做的就是创造一些基本函数能够适用于大部分形式的运动.

moveTo( ) 函数

moveTo() 函数可以将层/对象直接指向一个新的位置.

function moveTo(obj,x,y) {
	obj.xpos = x
	obj.left = obj.xpos
	obj.ypos = y
	obj.top = obj.ypos
}

这个函数的使用非常简单 -- 你所要做的就是告诉它涉及的层/对象以及新的 x 和 y 的位置. 例如, 如果你把层初始设置为:

if (ns4) mysquare = document.mysquareDiv
if (ie4) mysquare = mysquareDiv.style
mysquare.xpos = parseInt(mysquare.left)
mysquare.ypos = parseInt(mysquare.top)
然后把这个矩形移动到新的位置:
moveTo(mysquare,50,100)

moveBy( ) 函数

MoveBy 根据给定的象素值将一个层移动到新位置, 而非将层直接移过去.

function moveBy(obj,x,y) {
	obj.xpos += x
	obj.left = obj.xpos
	obj.ypos += y
	obj.top = obj.ypos
}

要将 mysquare 移动到 5 pixels right 和 10 pixels up 这个位置, 写法如下:

moveBy(mysquare,5,-10)

点击这里请看一个例句.

首页 下一课: 滑动
copyright 1998 Dan Steinman
Translated by Cartouche YU