为你的DHTML添活力

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

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

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

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

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

<style>DIV.object { behavior: url(Behavior.htc);}

从这段脚本中，你可以发现一个行为会提及到一个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"/>

<script language="JScript">
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 = [
0,
0,
parseInt(m_pNode.currentStyle.width),
parseInt(m_pNode.currentStyle.height)
];
m_dimensions = [
Node 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(part(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;

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有