透明度动画

时间 2019-12-02
标签透明度动画繁體版
原文原文链接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>透明度动画</title>    <link rel="stylesheet" href="reset.css">    <style type="text/css">        .odiv{width:200px; height:200px; background:#f00; position:relative; left:0px; top:100px;opacity:0.3; filter:alpha(opacity:30); float:left; margin:10px;}    </style></head><body><div id="odiv" class="odiv"></div></body></html><script language="javascript">    window.onload = function(){        var odiv = document.getElementsByTagName('div');        for(var i=0;i<odiv.length;i++)        {            odiv[i].onmouseover = function(){                startOP(this,100);            }            odiv[i].onmouseout = function(){                startOP(this,30);            }            odiv[i].timer = null;//事先定义            odiv[i].alpha = null;//事先定义            //这里发现一个问题，对象的动画属性能够不定义，可是透明度属性必须定义，不然报错        }    }    function startOP(obj,utarget){        clearInterval(obj.timer);//先关闭定时器        obj.timer = setInterval(function(){            var speed = 0;            if(obj.alpha>utarget){                speed = -10;            }            else{                speed = 10;            }            obj.alpha = obj.alpha+speed;            if(obj.alpha == utarget){                clearInterval(obj.timer);            }            obj.style.filter = 'alpha(opacity:'+obj.alpha+')';//基于IE的            obj.style.opacity = parseInt(obj.alpha)/100;        },300);    }</script>