首页手记长、宽、透明度变化动画

长、宽、透明度变化动画

标签：

Html/CSS JavaScript

1、注意浏览器对透明度属性定义的不同方式
2、计算机对小数的误差

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>长宽透明度变化动画</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        div {
            width:300px;
            height:100px;
            background:red;
            margin-bottom: 10px;
            border: 1px black solid;
            filter:Alpha(opacity:333);
            opacity: 0.333;
        }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            /*var aLi=document.getElementsByTagName('div');
            for(var i=0;i<aLi.length;i++){
                aLi[i].timer=null;
                aLi[i].onmouseover=function(){
                    startMove(this,400);
                }
                aLi[i].onmouseout=function(){
                    startMove(this,200);
                }
            }*/
alert(0.07)
            var odiv1=document.getElementById('div1');
            var odiv2=document.getElementById('div2');
            var odiv3=document.getElementById('div3');

            odiv1.onmouseover=function(){
                startMove(this,'width',400);
            }
            odiv1.onmouseout=function(){
                startMove(this,'width',300);
            }
            odiv2.onmouseover=function(){
                startMove(this,'height',200);
            }
            odiv2.onmouseout=function(){
                startMove(this,'height',100);
            }
            odiv3.onmouseover=function(){
                startMove(this,'opacity',100);
            }
            odiv3.onmouseout=function(){
                startMove(this,'opacity',55);
            }

        }
        function startMove(obj,attrr,iTarget){

            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                var icur=0;
                if(attrr=='opacity'){
                   // icur=parseFloat(getStyle(obj,attrr))*100;//小数在计算机中表示存在误差
                    icur=Math.round(parseFloat(getStyle(obj,attrr))*100);
                    //alert(parseFloat(getStyle(obj,attrr))*100);
                }
                else{
                    icur=parseInt(getStyle(obj,attrr));
                }
                 var speed=(iTarget-icur)/10;
                 speed=speed>0?Math.ceil(speed):Math.floor(speed);
                /*if(icur>iTarget){
                    speed=-10;
                }
                else {
                    speed=10;
                }*/
                if(iTarget==icur){
                    clearInterval(obj.timer);
                }else{
                    if(attrr=='opacity'){
                        obj.style.filter='alpha(opacity:'+(icur+speed)+')';
                        obj.style.opacity=(icur+speed)/100;
                    }
                    else{
                        obj.style[attrr] =icur+speed+'px';
                    }
                }
            },30);
        }
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];//IE
            }else{
                return getComputedStyle(obj,false)[attr];//火狐
            }
        }

        /*function startMove(obj,attrr,iTarget){
            // var aLi=document.getElementsByTagName('div');
            clearInterval(obj.timer);
            obj.timer=setInterval(function(){

                var speed;
                if(parseInt(getStyle(obj,attrr))>iTarget){
                    speed=-10;
                }
                else {
                    speed=10;
                }
                if(iTarget==parseInt(getStyle(obj,attrr))){
                    clearInterval(obj.timer);
                }else{
                    obj.style[attrr] =parseInt(getStyle(obj,attrr))+speed+'px';
                }
            },30);
        }*/
    </script>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

点击查看更多内容