為你的DHTML添活力

　　*purpleendurer修正了原文中的一些錯誤

　　你可以通過IE為你的HTML元素添加行為建立面向對象的頁面設計方法Phillip Perkins建立了一個<DIV>對象當用戶拖動它時它會在限定的<DIV>內繼續定向運行

　　Macromedia Flash可以使開發者免受網絡浏覽器與互操作解決方案的限制但是局限於Flash讓你無法體驗到網絡浏覽器的許多特色

　　例如你可以通過IE為HTML元素添加行為建立對象面向的頁面設計方法在這個例子中我會建立了一個<DIV>對象當用戶拖動它時它會在限定的<DIV>內繼續定向運行

　　為HTML添加行為的能力是設計的一個關鍵部分在IE中這通過相關的樣式來實現添加行為的樣式特性即behavior你可以通過嵌套的<STYLE>標簽來添加行為就像這樣

　　<style>DIVobject { behavior: url(Behaviorhtc);}

　　從這段腳本中你可以發現一個行為會提及到一個HTC（HTML組件）文件既然我們具有對象化這些HTML元素的基礎我們就能建立控制它們的行為腳本

　　表A中包含了為我們的嵌套<DIV>對象建立行為的所有代碼在這一個組件內就有許多的代碼

　　表 A 文件componenthtc的內容

---

　　<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 = ;
var m_tEnd = ;
var m_ptStart = null;
var m_Slope = null;
var m_interval = ;
var m_isMoving = false;
var m_trash = ;
var m_dX = ;
var m_dY = ;
var m_vectX = ;
var m_vectY = ;
var m_pNode = null;
var m_bounds = [];
var BOUNDS = {left:top:right:bottom:};
var m_dimensions = [];
var DIMS = {width:height:};

　　function Init()
{
    elementid = elementdocumentuniqueId;
    var m_pNode = elementparentNode;
    m_bounds = [
  
  
                parseInt(m_pNodecurrentStylewidth)
                parseInt(m_pNodecurrentStyleheight)
                ];
    m_dimensions = [
    Node            parseInt(elementoffsetWidth)
                parseInt(elementoffsetHeight)
                ];

　　}

　　function element_onmousedown()
{
    m_bStarted = true;
    m_tStart = new Date();
    clearInterval(m_interval);
    m_Slope = null;
    m_ptStart = null;
    m_trash = ;
    m_dX = ;
    m_dY = ;
    m_vectX = ;
    m_vectY = ;
    m_clickPoint = new Point(eventx eventy);
    m_ptStart = new Point(part(elementcurrentStyleleft) parseInt(elementcurrentStyletop));

　　}

　　function element_onmouseup()
{
    if (!m_bMoving) return;
    m_bMoving = false;
    m_bStarted = false;
    m_tEnd = new Date();
    var t = m_tEndvalueOf() m_tStartvalueOf();
    var lPoint = new Point(eventx eventy);
    m_Slope = Geometryslope(m_clickPoint lPoint);
    var ptEnd = m_Slopeadd(m_ptStart);
    elementstyleleft = ptEndposX + px;
    elementstyletop = ptEndposY + px;
    var spd = ;
    if (m_SlopedeltaX != && m_SlopedeltaY != )
    {
        spd = Mathsqrt(Mathpow(m_SlopedeltaX ) + Mathpow(m_SlopedeltaY))/t;
    }
    else
    {
 spd = (m_SlopedeltaX + m_SlopedeltaY)/t;
    }

　　if (spd > ) spd = ;
    m_dX = m_SlopedeltaX;
    m_dY = m_SlopedeltaY;
    if (m_dX != ) m_vectX = (m_dX > ) ? : ;
    if (m_dY != ) m_vectY = (m_dY > ) ? : ;
    startMove(element parseInt(/spd));
}

　　function element_onmousemove()
{
    m_bMoving = m_bStarted;
    if (!m_bMoving) return;
    var lPoint = new Point(eventx eventy);
    var lSlope = Geometryslope(m_clickPoint lPoint);
    var ptEnd = lSlopeadd(m_ptStart);
    elementstyleleft = ptEndposX + px;
    elementstyletop = ptEndposY + px;
}

　　function element_onselectstart()
{
    eventreturnValue = false;
    return false;
}

　　function element_ondragstart()
{
    eventreturnValue = false;
    return false;
}

　　function get_clickPoint()
{
    return m_clickPoint;
}

　　function put_clickPoint(o)
{
    if (typeof(o) == object && nstructor == 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; );
    var newX = parseInt(elementcurrentStyleleft);
    var newY = parseInt(elementcurrentStyletop);
    var dXabs = Mathabs(m_dX);
    var dYabs = Mathabs(m_dY);
    if (dXabs > dYabs)
    {
        //divide both by deltaX
        //each call move X by and Y by Y/X
        //if iteration > then move Y by
        //and add remainder back on Y
        newX += m_vectX;
        var l_step = (m_dY/m_dX) * ;
        m_trash = m_trash + l_step;
        if (m_trash > || m_trash < )
 {
            newY += m_vectY;
            m_trash = m_vectX;
        }
    }
    else
    {
        //viceversa
        newY += m_vectY;
        var l_step = (m_dX/m_dY) * ;
        m_trash = m_trash + l_step;
        if (m_trash > || m_trash < )
 {
            newX += m_vectX;
            m_trash = m_vectX;
        }
    }
    if (newX <= m_bounds[BOUNDSleft])
    {
        newX = m_bounds[BOUNDSleft] + ;
        m_vectX *= ;
    }
    else if ((newX + m_dimensions[DIMSwidth]) >= m_bounds[BOUNDSright])
    {
        newX = m_bounds[BOUNDSright] m_dimensions[DIMSwidth] ;
        m_vectX *= ;
    }

　　if (newY <= m_bounds[BOUNDStop])
    {
        newY = m_bounds[BOUNDStop] + ;
        m_vectY *= ;
    }
    else if ((newY + m_dimensions[DIMSheight]) >= m_bounds[BOUNDSbottom])
    {
        newY = m_bounds[BOUNDSbottom] m_dimensions[DIMSheight] ;
        m_vectY *= ;
    }

　　elementstyleleft = newX + px;
    elementstyletop = newY + px;
    setTimeout(m_isMoving = false; );
}
</script>

　　</public:component>

---

　　如果你注意到了腳本的頂部在那裡有一個特殊的標簽告訴浏覽器該用何種樣式呈現特性和包含組件的方法以及將這一組件添加到哪些事件中這些事件都是標准的HTML事件

　　當組件（在裝載事件中）初始化時它獲得一個uniqueID將其包含的母體記錄在一個數字變量中並為進程計算設定缺省值當你逐句通過這一對象的目標處理器時你會看到每當用戶點擊對象時 element_onmousedown()一些變量進行了初始化下一步用戶應該將對象拖動到另一個位置

　　當用戶在屏幕上拖動對象時— element_onmousemove() —對象的位置發生改變以與鼠標的運動相匹配然後用戶應該釋放鼠標按鈕讓對象自行移動

　　當用戶釋放鼠標按鈕— element_onmouseup() —或是鼠標脫離了對象區域— element_onmouseout() —時釋放點即被記錄下來並對用戶點擊對象到釋放對象的時間進行計算對象則獲得永恆運動通過計算得出點擊起始點與釋放終止點的斜度這個斜度成為對象新的移動路徑通過對象移動的距離與拖動時間可計算出用戶拖動對象的速度這個速度再又用來建立對象的移動方式最終速度的倒數被用來建立對象位置更新的時間間隔

　　在間隔中斷事件— moveMe() —中對象的上升(rise)與運動(run)將方向斜度轉換成計算的運動路徑將較大的方向改變與較小的方向改變區分開來我們就可以做到這點結果是其中一個方向改變總是而另一個則小於在每次中斷中兩個方向改變中較大的一個由一個向量單元增加可能是或是個像素另一個則增加較小方向改變的兩倍（即如果上升為而運動為的話那麼上升將增加 *向量而運動每次增加 * 單元）如果較小的改變增量超過向量單元（或）的話

　　如果對象的新位置位於限定元素之外向量則發生改變以與之相匹配這種方法將對象反彈到限定元素之外

　　表B是含有這些組件的HTML頁面

　　表 B 的內容

---

　　<html>

　　<head>

　　<style>
DIVbounds
{
    width: px;
    height: px;
    border: px red solid;
    overflow: hidden;

　　}

　　DIVobject
{
    position:absolute;
    left: px;
    top: px;
    border: px blue solid;
    behavior: url(componenthtc);
    cursor: hand;

　　}
</style>

　　<script language=JavaScript>

　　function Point(pX pY)
{
    thisposX = pX;
    thisposY = pY;
}

　　function CSlope(P P)
{
    thisdeltaY = PposY PposY;
    thisdeltaX = PposX PposX;
    thism = (PposY PposY)/(PposX PposX);
}

　　function _slopeAdd(P)
{
    var lPoint = new Point((PposX + thisdeltaX) (PposY + thisdeltaY));
    return lPoint;
}

　　CSlopeprototypeadd = _slopeAdd;

　　function CGeometry() {}

　　function _slope(P P)
{
    var lSlope = new CSlope(P P);
    return lSlope;
}

　　CGeometryprototypeslope = _slope;
var Geometry = new CGeometry();
var objStack = [];

　　function startMove(obj t)
{
    var id = objStackpush(obj);
    objStack[id]interval = setInterval(objStack[ + (id ) + ]moveMe() t);
}
</script>

　　</head>

　　<body >

　　<center>
<div class=bounds id=divBounds name=divBounds onselectstart=windoweventreturnValue = false;>
<div class=object>dog</div>
</div>
</center>
</body>
</html>

---

　　HTML頁面不過是包含<DIV>及作為組件元素的嵌套<DIV>在JavaScript內有一些支持對象與功能來幫助進行組件計算值得注意的是有一個對象棧— objStack —變量在間隔中斷過程中可以用來幫助管理對組件moveMe()方法的調用

　　拷貝這些代碼並將它粘貼到你自己的文件中記得把你的HTC文件命名為componenthtc特別用於行為樣式特性在IE 或更高版本中運行這個例子看著你的對象充滿活力

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/19564.html