當前位置:首頁 >> 站長天地 >> 網頁制作 >> 內容

為你的DHTML添活力

時間:2008-10-6 10:24:00 欄目:網頁制作 點擊: 來源:不詳

 [網頁制作]-本文簡要:你可以通過IE為你的HTML元素添加行為,建立面向對象的頁面設計方法。Phillip Perkins建立了一個DIV對象,當用戶拖動它時,它會在限定的DIV內繼續定向運行。Macromedia Flash可以使開發者免受網絡瀏覽器與互操作解決方案的限制。但是,局限于Flash讓你無法體驗到網絡瀏覽器...
D6電腦網 (d6pc.com): 為你的DHTML添活力-網頁制作

你可以通過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

如果你注意到了腳本的頂部,在那里有一個特殊的標簽告訴瀏覽器該用何種樣式呈現特性和包含組件的方法,以及將這一組件添加到哪些事件中。這些事件都是標準的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

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

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


Tags:活力 


D6電腦網|電腦學習,電腦維修,電腦技術網;
設電腦學習,電腦入門,電腦技術,電腦教程,電腦維修,硬件知識,
網頁設計建站,桌面壁紙,主題下載,WIN7下載,常用軟件下載等欄目。感謝您的支持!
欄目:網頁制作 作者:佚名 來源:不詳
相關文章
  • 沒有相關文章
共有評論 0相關評論
發表我的評論
  • 大名:
  • 內容:
本類推薦
  • 沒有
本類固頂
  • 沒有
網友推薦
鏈接申請
  • D6電腦網(www.hcocxw.live) © 2020 版權所有 All Rights Reserved.
  • 本站為純技術學習交流型網站,部分資源來源網絡,僅供學習交流,版權歸原作者,本站僅為轉載,如有侵犯您的利益請聯系我們刪除.謝謝!
    關于D6電腦學習網 廣告合作 [email protected] 聯系站長 網站地圖 粵ICP備09035016號
  • 擺脫淺薄和低俗的最好辦法就是學習,我們加油!D6PC! V3.0
  • 吉祥招财猫电子 河北时时彩 江西配资 金篮子配资 秒速飞艇 河南快3 雪缘园胜负彩比分直播 目前国内股票指数投资最常用的方法 互利计划 幸运赛车 股票分析 牛市快讯每天推送q 足彩胜负彩 广西快三 网络投资理财平台归哪个部门监管 三明期货配资 河北快三 股票融资软件有那些