透明度动画

来源：互联网发布：校园网络电视编辑：程序博客网时间：2024/05/16 12:58

实现思路：
每次均匀改变opacity值（ie的filter值），达到改变透明度的效果

效果：

这里写图片描述

实现步骤：
对元素绑定鼠标移入移出事件

window.onload = function(){    var container=document.getElementById('container');    container.onmouseover = function(){        moveStart(10,100);    };    container.onmouseout = function(){        moveStart(-10,30);    }};

编写moveStart()函数

1、对于ie和Firefox等浏览器不同处理
在ie浏览器中透明度的设置：filter: alpha(opacity:50);
在其他浏览器中:opacity: 0.5;

2、并没有container.offseAlpha属性
3、对于clearInterval(timer);代码段的解释
可将moveStart中的第一个
clearInterval(timer);
删除，将鼠标快速移入移出元素，你会发现元素会出现闪烁。
这是因为在进行移入移出操作不停调用moveStart，在未达到clearInterval的条件时就已经开始了下一个函数，而上一个定时器并未关闭，透明度增加和减少交替进行，就形成了闪烁的情况。
代码内容

var timer=null;var alpha = 50;function moveStart(oSpeed,oTarget){    clearInterval(timer);    timer=setInterval(function(){        if(oTarget === alpha){            clearInterval(timer);        }        else{            alpha += oSpeed;            container.style.filter = 'alpha(opacity:'+alpha+');'            container.style.opacity = alpha/100.0;        }    },30);}

完整样例：

js：

window.onload = function(){    var container=document.getElementById('container');    container.onmouseover = function(){        moveStart(10,100);    };    container.onmouseout = function(){        moveStart(-10,30);    }};var timer=null;var alpha = 50;clearInterval(timer);function moveStart(oSpeed,oTarget){    clearInterval(timer);    timer = setInterval(function(){    if(oTarget == alpha){      clearInterval(timer);     }    else{      alpha += oSpeed;      container.style.filter = 'alpha(opacity:'+alpha+');'      container.style.opacity = alpha/100.0;     }    },30);}

css：

#container{    width: 200px;    height: 200px;    background-color: red;    opacity: 0.5;    margin: auto;}

html：

<!DOCTYPE HTML><html><head></head><body>    <div id="container">    </div></body></html>

0 0