查看旧版所有文章

有风的日子,网页设计爱好者的家园

旧版

您现在访问的是有风的日子旧版!新版地址为:http://www.hellowind.com
有风的日子现已全面升级!新标识,新域名,新架构,新布局,新平台,不变的承诺——有风的日子,网页设计爱好者的家园
为网页设计、平面设计、多媒体设计及摄影爱好者提供资讯、博客、相册、论坛等多方位服务...

图片渐隐渐显的效果怎么做?

来源:有风的日子设计论坛    发表于2005-7-20 10:22:53

关键字:图片渐显, CSS, JavaScript

Q:图片渐隐渐显的效果怎么做?

A:1、用JavaScript来给css中的alpha滤镜,产生一个循环,检测alpha值是否达到100,如果没达到,则+10,直到达到100。原理是这样的,具体实现起来可以把以下JavaScript放在叶面的<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+=10
else if (window.highlighting)
clearInterval(highlighting)
}
//-->
</script>

然后在需要变化的图片的<img>最后写上onmouseout=low(this) onmouseover=high(this)
style="FILTER: alpha(opacity=40)"就行了。

2、用DW插件做
插件名称:Flash Image
下载页面:http://www.windstudio.net/res1.asp