HTML Component(HTC) 小應用
來源:易賢網 閱讀:1256 次 日期:2014-04-21 16:46:16
溫馨提示:易賢網小編為您整理了“HTML Component(HTC) 小應用”,方便廣大網友查閱!

在微軟IE 5.0版本的瀏覽器發布以前,網頁編程中面對的最大挑戰就是不能輕易地創建組件,以達到代碼重用和多頁面共享的目的。這個問題一直困擾著DHTML(動態 HEML)的網頁編程者。他們只能不斷地重復書寫HTML、CSS和javascript的代碼,以滿足多個頁面上的重復或相似的功能。自IE 5.0瀏覽器發布后,這種情況得到了改善,它帶給我們一個新的指令組合方法,可把實現特定功能的代碼封裝在一個組件內,從而實現多頁面的代碼重用,使網頁編程進入一個全新的天地。這個新的技術就是我們要談到的DHTML中的“行為”(Behaviors)。

下面是我做的一個小例子:

font_effect.htc

代碼如下:

////////////////////////“行為”文檔開始////////////////////////////  

//給“行為”增加四個鼠標事件  

<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="glowit()"/>  

<PUBLIC:ATTACH EVENT="onmouseout" ONEVENT="noglow()"/>  

<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="font2yellow()"/>  

<PUBLIC:ATTACH EVENT="onmouseup" ONEVENT="font2blue()"/>  

//給“行為”定義二個方法,注意NAME的值里不能加括號 

<PUBLIC:METHOD NAME="move_down"/>  

<PUBLIC:METHOD NAME="move_right"/>  

<script language ="JScript">  

//定義一個保存字體顏色的變量  

var font_color;  

//定義向下移動文字的方法  

function move_down()  

{  

    element.style.posTop += 10;  

}  

//定義向右移動文字的方法  

function move_right()  

{  

    element.style.posLeft += 10;  

}  

//定義鼠標onmouseup事件的調用函數  

function font2blue() 

{  

    if (event.srcElement == element)  

    {  

        element.style.color = "blue";  

    }  

}  

//定義鼠標onmousedown事件的調用函數  

function font2yellow() 

{  

    if (event.srcElement == element)  

    {  

        element.style.color = "yellow";  

    }  

}  

//定義鼠標onmouseover事件的調用函數  

function glowit()  

{  

    if (event.srcElement == element)  

    {  

        font_color=style.color;  

        element.style.color = "white";  

        element.style.filter = "glow(color=red, strength=2)";  

    }  

}  

//定義鼠標onmouseout事件的調用函數  

function noglow()  

{  

    if (event.srcElement == element)  

    {  

        element.style.filter = "";  

        element.style.color = font_color;  

    }  

}  

</script>  

//////////////////“行為”文檔結束/////////////////////////////// 

代碼如下:

<html> 

<head> 

    <title>行為效果演示</title> 

    <style> 

      .myfilter{behavior:url(font_effect.htc);position:relative;width:880}  

    </style> 

</head> 

<body> 

    <button onclick="myspan.move_right();">向右移動文字</button>  

    <button onclick="myspan.move_down();">向下移動文字</button> 

    <br /><br /> 

    <span id="myspan" class='myfilter'>鼠標指向后產生輝光,同時文字變白;按下鼠標后文字變黃;抬起鼠標后文字變藍;鼠標離開后文字恢復原狀</span> 

</body> 

更多信息請查看IT技術專欄

更多信息請查看腳本欄目
上一篇:沒有了
易賢網手機網站地址:HTML Component(HTC) 小應用
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看