鼠标实现图片的渐有渐无
添加时间: 2005-6-9 5:00:34 作者: 网络收集 阅读次数:53 来源: http://d9soft.com
1，CSS，JS，IMG一个都不能少
<style type="text/css">
<!--
.trans_img
{filter:alpha(opacity=30,enabled=1) blendtrans(duration=1);
border:0 solid black}
-->
</style>
<script language=javascript>
function transImg(obj,enable) {
obj.filters.blendtrans.Apply();
obj.filters[0].enabled=enable;
obj.filters.blendtrans.Play();
}
</script>
<img src="http://www.cnbruce.com/images/cnrose/a.gif" class="trans_img" onmouseover="transImg(this,0)" onmouseout="transImg(this,1)">
-----------------------------------------------------------------------
3，用htc文件，不用JS从而减轻工作量。
下载alpha.htc: http://www.cnbruce.com/js/alpha.htc
效果页查看：http://www.cnbruce.com/js/a.html
----------------------------------------------------------------------
<SCRIPT language=Javascript type=text/javascript>
function trains(id,text){document.all[id].innerHTML=' '+text}
function trainpic(id,text){document.all[id].innerHTML='<img src="'+text+'.gif">'}
function high(which2){
theobject=which2;theobject.filters.alpha.opacity=0
highlighting=setInterval("highlightit(theobject)",50)}
function low(which2){
clearInterval(highlighting)
which2.filters.alpha.opacity=100}
function highlightit(cur2){
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=15
else if(window.highting)
clearInterval(highlighting)}
</SCRIPT>
<a href="http://www.cnbruce.com/">
<IMG onmouseover="this.style.filter='alpha(opacity=100)';high(this)" onmouseout="low(this)" src="http://www.cnbruce.com/images/cnrose/a.gif" border="0">
</a>
--------------------------------------------------------------------
<SCRIPT>
function doTrans(filterCode)
{
imgObj.filters[0].apply();
oImg.style.filter = filterCode
imgObj.filters[0].play();
}
</SCRIPT>
<SPAN id=imgObj
onmouseleave='doTrans("gray")'
style="FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); WIDTH: 1px"
onmouseenter='doTrans("")'>
<IMG id=oImg style="FILTER: gray" src="http://www.cnbruce.com/images/cnrose/a.gif">
</SPAN>
上一篇文章: DHTML打造PictureSpelling 下一篇文章: DHTML各种HTML对象常用属性
相关文章: