为你的DHTML添活力

来源：http://www.zdnet.com.cn/developer/webdevelop/story/0,3800067013,39383734,00.htm

作者： Phillip Perkins

*purpleendurer修正了原文中的一些错误

你可以通过IE为你的HTML元素添加行为，建立面向对象的页面设计方法。Phillip Perkins建立了一个<DIV>对象，当用户拖动它时，它会在限定的<DIV>内继续定向运行。

Macromedia Flash可以使开发者免受网络浏览器与互操作解决方案的限制。但是，局限于Flash让你无法体验到网络浏览器的许多特色。

例如，你可以通过IE为HTML元素添加行为，建立对象面向的页面设计方法。在这个例子中，我会建立了一个<DIV>对象，当用户拖动它时，它会在限定的<DIV>内继续定向运行。

为HTML添加行为的能力是设计的一个关键部分。在IE中，这通过相关的样式来实现。添加行为的样式特性即“behavior”。你可以通过嵌套的<STYLE>标签来添加行为，就像这样：

从这段脚本中，你可以发现一个行为会提及到一个HTC（HTML组件）文件。既然我们具有对象化这些HTML元素的基础，我们就能建立控制它们的行为脚本。

表A中包含了为我们的嵌套<DIV>对象建立行为的所有代码。在这一个组件内就有许多的代码。

表 A --文件component.htc的内容

<public:component lightweight="true">

<public:attach event="onmousedown" onevent="element_onmousedown()"/>

<public:attach event="onmousemove" onevent="element_onmousemove()"/>

<public:attach event="onmouseup" onevent="element_onmouseup()"/>

<public:attach event="onmouseout" onevent="element_onmouseup()"/>

<public:attach event="onselectstart" onevent="element_onselectstart()"/>

<public:attach event="ondragstart" onevent="element_ondragstart()"/>

<public:attach event="onload" for="window" onevent="Init()"/>

<public:method name="moveMe"/>

<public:property name="clickPoint" get="get_clickPoint" put="put_clickPoint"/>

<public:property name="interval" get="get_interval" put="put_interval"/>

var m_bStarted = false;

var m_bMoving = false;

var m_clickPoint = null;

var m_tStart = 0;

var m_tEnd = 0;

var m_ptStart = null;

var m_Slope = null;

var m_interval = 0;

var m_isMoving = false;

var m_trash = 0;

var m_dX = 0;

var m_dY = 0;

var m_vectX = 0;

var m_vectY = 0;

var m_pNode = null;

var m_bounds = [];

var BOUNDS = {"left":0,"top":1,"right":2,"bottom":3};

var m_dimensions = [];

var DIMS = {"width":0,"height":1};

function Init()

{

element.id = element.document.uniqueId;

var m_pNode = element.parentNode;

m_bounds = [

parseInt(m_pNode.currentStyle.width),

parseInt(m_pNode.currentStyle.height)

];

m_dimensions = [

parseInt(element.offsetWidth),

parseInt(element.offsetHeight)

];

}

function element_onmousedown()

{

m_bStarted = true;

m_tStart = new Date();

clearInterval(m_interval);

m_Slope = null;

m_ptStart = null;

m_trash = 0;

m_dX = 0;

m_dY = 0;

m_vectX = 0;

m_vectY = 0;

m_clickPoint = new Point(event.x, event.y);

m_ptStart = new Point(parseInt(element.currentStyle.left), parseInt(element.currentStyle.top));

}

function element_onmouseup()

{

if (!m_bMoving) return;

m_bMoving = false;

m_bStarted = false;

m_tEnd = new Date();

var t = m_tEnd.valueOf() - m_tStart.valueOf();

var lPoint = new Point(event.x, event.y);

m_Slope = Geometry.slope(m_clickPoint, lPoint);

var ptEnd = m_Slope.add(m_ptStart);

element.style.left = ptEnd.posX + "px";

element.style.top = ptEnd.posY + "px";

var spd = 0;

if (m_Slope.deltaX != 0 && m_Slope.deltaY != 0)

{

spd = Math.sqrt(Math.pow(m_Slope.deltaX, 2) + Math.pow(m_Slope.deltaY,2))/t;

}

else

{

spd = (m_Slope.deltaX + m_Slope.deltaY)/t;

}

if (spd > 1) spd = 1;

m_dX = m_Slope.deltaX;

m_dY = m_Slope.deltaY;

if (m_dX != 0) m_vectX = (m_dX > 0) ? 2 : -2;

if (m_dY != 0) m_vectY = (m_dY > 0) ? 2 : -2;

startMove(element, parseInt(1/spd));

}

function element_onmousemove()

{

m_bMoving = m_bStarted;

if (!m_bMoving) return;

var lPoint = new Point(event.x, event.y);

var lSlope = Geometry.slope(m_clickPoint, lPoint);

var ptEnd = lSlope.add(m_ptStart);

element.style.left = ptEnd.posX + "px";

element.style.top = ptEnd.posY + "px";

}

function element_onselectstart()

{

event.returnValue = false;

return false;

}

function element_ondragstart()

{

event.returnValue = false;

return false;

}

function get_clickPoint()

{

return m_clickPoint;

}

function put_clickPoint(o)

{

if (typeof(o) == "object" && o.constructor == "Point")

{

m_clickPoint = o;

}

else

{

alert("Expected Point.");

}

function get_interval()

{

return m_interval;

}

function put_interval(n)

{

m_interval = n;

}

function moveMe()

{

if (m_isMoving) return;

setTimeout("m_isMoving = true;", 1);

var newX = parseInt(element.currentStyle.left);

var newY = parseInt(element.currentStyle.top);

var dXabs = Math.abs(m_dX);

var dYabs = Math.abs(m_dY);

if (dXabs > dYabs)

{

//divide both by deltaX

//each call move X by 1 and Y by Y/X

//if iteration > 1, then move Y by 1

//and add remainder back on Y

newX += m_vectX;

var l_step = (m_dY/m_dX) * 2;

m_trash = m_trash + l_step;

if (m_trash > 2 || m_trash < -2)

{

newY += m_vectY;

m_trash -= m_vectX;

}

else

{

//vice-versa

newY += m_vectY;

var l_step = (m_dX/m_dY) * 2;

m_trash = m_trash + l_step;

if (m_trash > 2 || m_trash < -2)

{

newX += m_vectX;

m_trash -= m_vectX;

}

if (newX <= m_bounds[BOUNDS.left])

{

newX = m_bounds[BOUNDS.left] + 1;

m_vectX *= -1;

}

else if ((newX + m_dimensions[DIMS.width]) >= m_bounds[BOUNDS.right])

{

newX = m_bounds[BOUNDS.right] - m_dimensions[DIMS.width] - 1;

m_vectX *= -1;

}

if (newY <= m_bounds[BOUNDS.top])

{

newY = m_bounds[BOUNDS.top] + 1;

m_vectY *= -1;

}

else if ((newY + m_dimensions[DIMS.height]) >= m_bounds[BOUNDS.bottom])

{

newY = m_bounds[BOUNDS.bottom] - m_dimensions[DIMS.height] - 1;

m_vectY *= -1;

}

element.style.left = newX + "px";

element.style.top = newY + "px";

setTimeout("m_isMoving = false;", 1);

}

</script>

</public:component>

如果你注意到了脚本的顶部，在那里有一个特殊的标签告诉浏览器该用何种样式呈现特性和包含组件的方法，以及将这一组件添加到哪些事件中。这些事件都是标准的HTML事件。

当组件（在装载事件中）初始化时，它获得一个uniqueID，将其包含的母体记录在一个数字变量中，并为进程计算设定缺省值。当你逐句通过这一对象的目标处理器时，你会看到每当用户点击对象时--- element_onmousedown()---一些变量进行了初始化。下一步，用户应该将对象拖动到另一个位置。

当用户在屏幕上拖动对象时— element_onmousemove() —对象的位置发生改变，以与鼠标的运动相匹配。然后，用户应该释放鼠标按钮，让对象自行移动。

当用户释放鼠标按钮— element_onmouseup() —或是鼠标脱离了对象区域— element_onmouseout() —时，释放点即被记录下来，并对用户点击对象到释放对象的时间进行计算，对象则获得永恒运动。通过计算得出点击起始点与释放终止点的斜度，这个斜度成为对象新的移动路径。通过对象移动的距离与拖动时间可计算出用户拖动对象的速度。这个速度再又用来建立对象的移动方式。最终，速度的倒数被用来建立对象位置更新的时间间隔。

在间隔中断事件— moveMe() —中，对象的上升(rise)与运动(run)将方向斜度转换成计算的运动路径。将较大的方向改变与较小的方向改变区分开来，我们就可以做到这点。结果是，其中一个方向改变总是1，而另一个则小于1。在每次中断中，两个方向改变中较大的一个由一个向量单元增加，可能是-2或是2个像素。另一个则增加较小方向改变的两倍（即，如果上升为2而运动为1的话，那么上升将增加1 *向量而运动每次增加.5 * 2单元）。如果较小的改变增量超过向量单元（-2或2）的话，

如果对象的新位置位于限定元素之外，向量则发生改变以与之相匹配。这种方法将对象“反弹”到限定元素之外。

表B是含有这些组件的HTML页面。

表 B --demo.htm的内容

<html>

<head>

<style>

DIV.bounds

{

width: 800px;

height: 600px;

border: 1px red solid;

overflow: hidden;

}

DIV.object

{

position:absolute;

left: 0px;

top: 0px;

border: 0px blue solid;

behavior: url(component.htc);

cursor: hand;

}

</style>

function Point(pX, pY)

{

this.posX = pX;

this.posY = pY;

}

function CSlope(P1, P2)

{

this.deltaY = P2.posY - P1.posY;

this.deltaX = P2.posX - P1.posX;

this.m = (P2.posY - P1.posY)/(P2.posX - P1.posX);

}

function _slopeAdd(P1)

{

var lPoint = new Point((P1.posX + this.deltaX), (P1.posY + this.deltaY));

return lPoint;

}

CSlope.prototype.add = _slopeAdd;

function CGeometry() {}

function _slope(P1, P2)

{

var lSlope = new CSlope(P1, P2);

return lSlope;

}

CGeometry.prototype.slope = _slope;

var Geometry = new CGeometry();

var objStack = [];

function startMove(obj, t)

{

var id = objStack.push(obj);

objStack[id-1].interval = setInterval("objStack[" + (id - 1) + "].moveMe()", t);

}

</script>

</head>

</div>

</center>

</body>

</html>

HTML页面不过是包含<DIV>及作为组件元素的嵌套<DIV>。在JavaScript内，有一些支持对象与功能来帮助进行组件计算。值得注意的是，有一个对象栈— objStack —变量，在间隔中断过程中，可以用来帮助管理对组件moveMe()方法的调用。

拷贝这些代码并将它粘贴到你自己的文件中。记得把你的HTC文件命名为component.htc，特别用于行为样式特性。在IE 5.0或更高版本中运行这个例子，看着你的对象充满活力。