HTC实例

作者：闪吧   类型:原创   来源:闪吧

　　1.单元格背景色切换
这里以简单的背景颜色变换效果为例，说明如何将一般的效果用HTC写出来。
(1)最简单也是最麻烦的做法，在每个单元格里加上 onmouseover 和 onmouseout 事件来执行一段代码：

 <table border="1" align="center" bordercolor="#000000"
 style="border-collapse: collapse;width:600px;height:200px">
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
   <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
  <tr> 
<td onmouseover="this.style.background=’#EEEEEE’"
 onmouseout="this.style.background=’#FFFFFF’"> </td>
  </tr>
</table>

(2)可以看到，这样做出来的代码量非常"可观"，将它修改并封装成 HTC：

tableColor.htc页的代码 ：

<public:component>
<public:attach event="onmouseover" onevent="cr(’#EEEEEE’)" />
<public:attach event="onmouseout" onevent="cr(’#FFFFFF’)" />
<script>
function cr(rgb){
    element.runtimeStyle.background=rgb
}
</script>
</public:component>

在网页中调用HTC：

<style>
td{behavior:url(tableColor.htc)}
</style>
<table border="1" align="center" bordercolor="#000000"
 style="border-collapse: collapse;width:600px;height:200px">
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
  <tr><td></td></tr>
 </table>

2．可拖动的层
(1)常规的做法是在层上加上 onmousedown、onmousemove 和 onmouseup 来调用相应函数：

<style>
.drag{position:absolute;border:1px solid #000000;
background:#eeeeee;width:100px;height:150px}
</style>
<script>
var isDown=false,iX,iY,iZ
function down(){
    event.cancelBubble = true
    isDown=true
    event.srcElement.setCapture()
    iX= document.body.scrollLeft + event.x - event.srcElement.style.posLeft
    iY= document.body.scrollTop + event.y - event.srcElement.style.posTop
    iZ=event.srcElement.style.zIndex
    event.srcElement.style.zIndex=100
}
function move(){
    if(isDown){       event.srcElement.style.posLeft=document.body.scrollLeft+event.x-iX
    event.srcElement.style.posTop=document.body.scrollTop+event.y-iY
    } 
}
function up(){
    event.srcElement.releaseCapture()
    isDown=false
    event.srcElement.style.zIndex=iZ
}
</script>
<div class="drag" style="left:10;top:10;z-index:1"
 onmousedown="down()" onmousemove="move()" onmouseup="up()">
Layer 1
</div>
<div class="drag" style="left:30;top:30;z-index:2"
 onmousedown="down()" onmousemove="move()" onmouseup="up()">
Layer 2
</div>
<div class="drag" style="left:50;top:50;z-index:3"
 onmousedown="down()" onmousemove="move()" onmouseup="up()">
Layer 3
</div>

(2)写成HTC。
drag.htc：

<public:component>
<public:attach event="onmousedown" handler="down" />
<public:attach event="onmousemove" handler="move" />
<public:attach event="onmouseup" handler="up" />
<script>
var isDown = false,iX,iY,iZ
function down(){
    event.cancelBubble = true
    isDown = true
    element.setCapture()
    iX = document.body.scrollLeft + event.x - element.style.posLeft
    iY = document.body.scrollTop + event.y - element.style.posTop
    iZ = element.style.zIndex
    element.style.zIndex=100
}
function move(){
    if(isDown){
       element.style.posLeft = document.body.scrollLeft + event.x - iX
       element.style.posTop = document.body.scrollTop + event.y - iY
    }
}
function up(){
    element.releaseCapture()
    isDown = false
    element.style.zIndex = iZ
}
</script>
</public:component>

然后在网页中调用HTC：

<style>
.drag{behavior:url(drag.htc);position:absolute;border:1px solid #000000;background:#eeeeee;width:100px;height:150px}
</style>
<div class="drag" style="left:10;top:10;z-index:1">Layer 1</div>
<div class="drag" style="left:30;top:30;z-index:2">Layer 2</div>
<div class="drag" style="left:50;top:50;z-index:3">Layer 3</div>

3．HTC 打造的 Flash 播放器
(1)主文件 player.htm：

<html xmlns:flash8>
<head>
<import namespace="flash8" implementation="player.htc" />
</head>
<body>
<flash8:player src="http://file.flash8.net/2003up/2003/5/30/20035301135555231.swf" width="600" height="480" />
<flash8:player src="http://www.flash8.net/upload/2003/11/27/200311271903237790.swf" width="550" height="400" />
<flash8:player src="http://www.flash8.net/upload/2003/11/25/20031125122374426.swf" width="500" height="400" />
</body>
</html>

(2)HTC 文件 player.htc：

<public:component tagName="player">
<public:defaults viewLinkContent="true" viewInheritStyle="false" viewMasterTab="false" />
</public:component>
<style>
body,td,button{font:normal 12px Tahoma;color:#333333;text-align:center}
button{border:1px solid #333333;background:#EEEEEE;margin:2px;font-family:Webdings;height:20px}
</style>
<script>
var movie,timer,step,total,state=null,delay=100
function init(){
    total=movie.TotalFrames
    step=5
    buttonState(false)
    timer = window.setInterval(showStatus,delay)
}

function Rewind(){
    movie.Rewind()
}

function Back(){
    if(movie.FrameNum>=step&&state!="forward")    {
       state="back"
       Quick()
       setTimeout(Back,delay)
    }
    else state=null
}

function Play(){
    movie.Play()
}

function Pause(){
    with(movie)IsPlaying()?StopPlay():Play()
}

function Stop(){
    movie.StopPlay()
}

function Forward(){
    if(movie.FrameNum!=total-1&&state!="back"){
       state="forward"
       Quick()
       setTimeout(Forward,delay)
    }
    else state=null
}

function GoToEnd(){
    movie.GoToFrame(total-1)
}

function Replay(){
    Rewind()
    Play()
    setTimeout(Play,delay*5)
}

function showStatus(){
    var N=movie.FrameNum
    bar.style.width=Math.round((N+1)*100/total)+"%"
    frameCount.innerText=(N+1)+"/"+total
}

function Quick(){
    var targetFrame=movie.FrameNum+step*{back:-1,forward:1}[state]
     movie.GoToFrame(targetFrame)
}

function selectMovie(){
    document.getElementById("moviefile").click()
}

function loadMovie(){
    var file=event.srcElement.value
    if(//w/.swf$/.test(file))   {
       movie.LoadMovie(0,file)
       loaded()
    }
    else alert("文件格式错误，请重新选择")
}

function buttonState(de){
    var buttons=ctlButtons.document.all.tags("BUTTON")
    for(var i=0;i<buttons.length-1;i++)
        buttons[i].disabled=de
}

function loaded(){
    if(movie.PercentLoaded()==100)
       init()
    else setTimeout("loaded()",100)
    frameCount.innerText=movie.PercentLoaded()+"%"
    bar.style.width=frameCount.innerText
}
</script>
<div style="border:1px solid #666666;padding:3px">
<object id="movie" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="550" height="400" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="about:blank" />
<param name="quality" value="high" />
<param name="menu" value="false" />
<param name="scale" value="noscale" />
<param name="bgcolor" value="#000000" />
</object>
<table style="width:550px" cellspacing="0" cellpadding="0" border="0">
    <tr>
       <td style="vertical-align:middle">
           <table style="border:1px solid #333333;width:90%;
height:5px" cellpadding="1" cellspacing="0">
              <tr>
                  <td style="text-align:left;vertical-align:middle">
                     <table cellspacing="0" cellpadding="0" id="bar" style="width:0%;height:3px;background:#00FF44">
                         <tr>
                            <td>
                            </td>
                         </tr>
                     </table>
                  </td>
              <tr>
           </table>
       </td>
       <td style="text-align:right;width:50px" id="frameCount"></td>
    </tr>
</table>
<span id="ctlButtons">
<button onClick="Rewind()" title="跳至第一帧">9</button>
<button onClick="Back()" title="快退">7</button>
<button onClick="Play()" title="播放">4</button>
<button onClick="Pause()" title="暂停">;</button>
<button onClick="Stop()" title="停止"><</button>
<button onClick="Forward()" title="快进">8</button>
<button onClick="GoToEnd()" title="跳至最末帧">:</button>
<button onClick="Replay()" title="重放">q</button>
<button onClick="selectMovie()" title="打开 Flash 文件">5</button><input type="file" id="moviefile" style="display:none" onpropertychange="loadMovie()"></span>
<script defer>
movie=document.getElementById("movie")
movie.movie = element.src
movie.width = element.width
movie.height = element.height
buttonState(true)
loaded()
</script>
</div>

 提示：
l         关于表格的变色问题详细解释，请参考第一部分第二章问题12。
l         关于层的拖动问题详细解释，请参考第一部分第三章问题9和第三部分问题4。
l         关于Flash播放器的详细解释，请参考第五部分第五章的问题一。
特别提示
HTC封装后应用的代码的运行效果和原代码运行效果完全一样，具体请按提示中的说明参考相关例子或自行测试代码。

特别说明

通过对三个不同例子的HTC转化封装，再对照第二节中的属性、方法和事件的说明，读者朋友们应该能熟练掌握HTC的封装和应用了。