图片的淡入淡出(HTC)
这是我用HTC写的一个图片淡入淡出的组件,供参考,如有不好提意见,互相学习.
<PUBLIC:COMPONENT URN="urn:msdn-microsoft-com:workshop" >
<PUBLIC:attach event="ondocumentready" onevent="init()"/>
<PUBLIC:attach event="onmouseover" onevent="fade_on()"/>
<PUBLIC:attach event="onmouseout" onevent="fade_off()"/>
<PUBLIC:method name="fade" />
<script>
//////////////////////////////
//author by fason(2003-5-10)//
//////////////////////////////
var timer;
var initOffset;
var onOffset=5
var offOffset=10;//移上，移走时opacity的偏移量
function init(){
initOffset=element.filters.alpha.opacity
}
function fade_on(){
clearInterval(timer)
timer=window.setInterval("document.all['"+element.uniqueID+"'].fade(0)",10)
}
function fade_off(){
clearInterval(timer)
timer=window.setInterval("document.all['"+element.uniqueID+"'].fade(1)",10)
}
function fade(n){
opacty=element.filters.alpha.opacity
if(n)
if(opacty>initOffset)element.filters.alpha.opacity-=offOffset
else clearInterval(timer)
else
if(opacty<100)element.filters.alpha.opacity+=offOffset
else clearInterval(timer)
}
</script>
</PUBLIC:COMPONENT>
使用:
<style>
img{behavior:url(fade.htc);}
</style>
<img src="csdn.gif" style="filter:alpha(opacity=20);">
<img src="csdn.gif" style="filter:alpha(opacity=40);">
<img src="csdn.gif" style="filter:alpha(opacity=60);">
<img src="csdn.gif" style="filter:alpha(opacity=80);">
演示：