WEB开发网
开发学院网页设计JavaScript 图片的淡入淡出(HTC) 阅读

图片的淡入淡出(HTC)

 2007-11-27 16:36:14 来源:WEB开发网   
核心提示:这是我用HTC写的一个图片淡入淡出的组件,供参考,如有不好提意见,互相学习.<PUBLIC:COMPONENT URN=urn:msdn-microsoft-com:workshop ><PUBLIC:attach event=ondocumentready onevent=init()/>&l

这是我用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=http://www.chinageren.com/chengxu/Javascript/csdn.gif style=filter:alpha(opacity=20);>
<img src=http://www.chinageren.com/chengxu/Javascript/csdn.gif style=filter:alpha(opacity=40);>
<img src=http://www.chinageren.com/chengxu/Javascript/csdn.gif style=filter:alpha(opacity=60);>
<img src=http://www.chinageren.com/chengxu/Javascript/csdn.gif style=filter:alpha(opacity=80);>

演示:

http://fason.nease.net/code/js/other/fade.htm

Tags:图片 淡入 淡出

编辑录入:coldstar [复制链接] [打 印]
赞助商链接