|
设定缺省值。当你逐句通过这一对象的目标处理器时，你会看到每当用户点击对象时--- 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>
<script language="JavaScript">
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>
<body style="font-family: Verdana; font-size: 24pt;">
<center>
<div class="bounds" id="divBounds" name="divBounds" onselectstart="window.event.returnValue = false;">
<div class="object">dog</div>
</div>
</center>
</body>
</html>
HTML页面不过是包含<DIV>及作为组件元素的嵌套<DIV>。在JavaScript内，有一些支持对象与功能来帮助进行组件计算。值得注意的是，有一个对象栈— objStack —变量，在间隔中断过程中，可以用来帮助管理对组件moveMe()方法的调用。
拷贝这些代码并将它粘贴到你自己的文件中。记得把你的HTC文件命名为component.htc，特别用于行为样式特性。在IE 5.0或更高版本中运行这个例子，看着你的对象充满活力。
上一页 [1] [2]
没有相关教程
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
