怎么实现鼠标移上时图片渐现的效果

怎么实现鼠标移上时图片渐现的效果
解决思路：
       首先需要明确和鼠标事件相关，效果的实现主要是靠鼠标事件来驱动，而图片的渐现主要是与图片的透明度有关。
具体步骤：
方法一： 利用alpha滤镜和blendTrans滤镜实现的。
1.在类中定义所需要的两个滤镜。

<style>
.alpha{filter:alpha(opacity=20) blendTrans(duration=0.5)}
</style>

2.插入图片，并应用定义了滤镜的类。

<img src="demo.gif" class="alpha">

3.编写脚本。完整代码：

<style>
.alpha{filter:alpha(opacity=20) blendTrans(duration=0.5)}
</style>
<script>
function fade(){
//如果是onmouseover事件触发的函数，设置变量v的值为100，否则(为//onmouseout所触发时)为20
var v=(event.type=="mouseover"?100:20)    
if(event.srcElement.tagName=="IMG"&&event.srcElement.className=="alpha")//如果对象是class为alpha的图片，执行下面的代码
   with(event.srcElement){
        filters[1].apply()//捕获对象内容的初始显示，为转换做必要的准备。
//设置alpha滤镜参数opacity的值为变量v的值
        filters[0].opacity=v
        filters[1].play() //开始转换。
   }
}
document.onmouseover=fade//鼠标移上时触发fade函数
document.onmouseout=fade //鼠标移开时触发fade函数
</script>
<img src="demo.gif" class="alpha">

方法二：直接改变alpha滤镜参数opacity的值，以达到渐变的效果。
1.在类中定义alpha滤镜。

<style>
.alpha{filter:alpha(opacity=20)}
</style>

2. 插入图片，并应用定义了滤镜的类。

<img src="demo.gif" class="alpha">

3. 编写脚本。完整代码：

<style>
.alpha{filter:alpha(opacity=20)}
</style>
<script>
var obj,step
function init(){
    if(!(event.srcElement.tagName=="IMG"&&event.srcElement.className=="alpha") ) //如果对象不是class为alpha的图片，退出函数
       return
    obj=event.srcElement.filters.alpha
    step=10       //alpha滤镜参数opacity的值的改变量
    if(event.type=="mouseout")  //鼠标移开时step值为负
       step*=-1
    fade()                      //调用fade()函数
}
function fade(){
//鼠标移上时alpha滤镜参数opacity的值小于100或 鼠标移开时alpha滤//镜参数opacity的值大于20，执行下面的代码
    if((step>0&&obj.opacity<100)||(step<0&&obj.opacity>20)){
//alpha滤镜参数opacity的值以step为步长递增或减
       obj.opacity+=step 
       setTimeout("fade()",10)     //10毫秒后再次执行fade()函数
    }
}
document.onmouseover=init          //鼠标移上时触发init()函数
document.onmouseout=init        //鼠标移开时触发init()函数
</script>
<img src="demo.gif" class="alpha">

注意：方法一中的样式表里两滤镜的定义顺序不要改变，否则代码中的filters[1]要与filters[0] 交换，0表示对象的第一个滤镜，1表示对象的第二个滤镜，以此类推。
特别提示
本例代码运行后，图片的默认透明度为20%，而在鼠标移到图片上时图片将逐渐清晰(透明度从20%到100%逐渐变化)，而鼠标移开后图片又渐渐恢复20%的透明度，效果如图1.8.23所示。

图1.8.23 图片的渐现渐隐效果

特别说明

本例主要是Alpha和blendTrans滤镜的应用，关于这两个滤镜的详细使用说明，请参考第二部分的第三章。