精华区 [关闭][返回]
当前位置：网易精华区>>讨论区精华>>网络专区>>● 网站建设>>雕虫小技 — 经验技巧集锦>>图片之淡入淡出效果

主题：图片之淡入淡出效果
发信人: bill8881(7king)
整理人: eagle(2002-10-29 20:43:35), 站内信件



这个效果完整的说应该是javascript+鼠标事件+css所完成的效果，代码如下： 

　　需要两个步骤: 

第一步:在<head></head>中加入如下代码 
<SCRIPT language=JavaScript1.2> 

function high(which2){ 
theobject=which2 
highlighting=setInterval("highlightit(theobject)",50) 
} 
function low(which2){ 
clearInterval(highlighting) 
which2.filters.alpha.opacity=40 
} 


function highlightit(cur2){ 
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=8
else if (window.highlighting)
clearInterval(highlighting)
}

</SCRIPT> 


第二步: 

在你需要产生渐变的图片连接后加上这样一段代码 

onmouseout=low(this) onmouseover=high(this) 
style="FILTER: alpha(opacity=40)" 

加入代码前: 

<img name="lhcdg.net" src="http://lhcdg.net/images/lhcdgnet.gif" width="88" height="31" border="0"> 

加入代码后变成： 

<img name="lhcdg.net" src="http://lhcdg.net/images/lhcdgnet.gif" width="88" height="31" border="0" onmouseout=low(this) onmouseover=high(this)
style="FILTER: alpha(opacity=40)"> 


=-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=- 
注意：alpha是css中滤镜的一种，你可以自己设施alpha的值(0~100),css还有许多的滤镜，比如火焰效果，阴影效果等。alpha指的是透明度。 
onmouseout和onmouseover就是鼠标事件。 
=-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=-=-=-=-==-=- 

下面是一个完整的例子：


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
<SCRIPT language=JavaScript1.2> 

function high(which2){ 
theobject=which2 
highlighting=setInterval("highlightit(theobject)",50) 
} 
function low(which2){ 
clearInterval(highlighting) 
which2.filters.alpha.opacity=40 
} 


function highlightit(cur2){ 
if (cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=8
else if (window.highlighting)
clearInterval(highlighting)
}

</SCRIPT> 
</head>

<body>
<img name="lhcdg.net" src="http://lhcdg.net/images/lhcdgnet.gif" width="88" height="31" border="0" onmouseout=low(this) onmouseover=high(this)
style="FILTER: alpha(opacity=40)">
</body>

</html> 



[关闭][返回]