src="http://www2.flash8.net/teach/teachInfo.aspx?id=4019" style="margin: 0pt; padding: 0pt; width: 400px; height: 25px;" frameborder="0" scrolling="no">
1.单元格背景色切换
这里以简单的背景颜色变换效果为例,说明如何将一般的效果用HTC写出来。
(1)最简单也是最麻烦的做法,在每个单元格里加上 onmouseover 和 onmouseout 事件来执行一段代码:
<table border="1" align="center" bordercolor="#000000"
style="border-collapse: collapse;width:600px;height:200px">
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="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"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="up()">
Layer 1
</div>
<div class="drag" style="left:30;top:30;z-index:2"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="up()">
Layer 2
</div>
<div class="drag" style="left:50;top:50;z-index:3"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="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的封装和应用了。
这里以简单的背景颜色变换效果为例,说明如何将一般的效果用HTC写出来。
(1)最简单也是最麻烦的做法,在每个单元格里加上 onmouseover 和 onmouseout 事件来执行一段代码:
<table border="1" align="center" bordercolor="#000000"
style="border-collapse: collapse;width:600px;height:200px">
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="this.style.background=’#FFFFFF’"> </td>
</tr>
<tr>
<td οnmοuseοver="this.style.background=’#EEEEEE’"
οnmοuseοut="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"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="up()">
Layer 1
</div>
<div class="drag" style="left:30;top:30;z-index:2"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="up()">
Layer 2
</div>
<div class="drag" style="left:50;top:50;z-index:3"
οnmοusedοwn="down()" οnmοusemοve="move()" οnmοuseup="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的封装和应用了。