|
*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;
}
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，将其包含的母体记录在一个数字变量中，并为进程计算 [1] [2] 下一页
没有相关教程
| 
注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！ 本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网] 
