js 系列(4) 透明度 简单运动

Posted on Posted in js

透明度

css透明度属性的写法:

opacity: 0.5;
filter: alpha(opacity=50) // 0-100 兼容

获得opacity属性。

h.innerHTML = box.style.opacity;

IE6/7/8浏览器虽然不认识opacity属性,但是能够通过点语法得到对应的属性值。
输出问题:如果opacity设置的小数值使用了.5的这种写法,高级浏览器输出的时候,自动变为0.5,低版本刘浏览器就输出字符串.5。

透明度如果参与运动:第一,值不能加单位,第二,要兼容低版本浏览器。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
            top: 100px;
            left: 0;            
            filter: alpha(opacity=30);
        }
    </style>
</head>
<body>
    <h1></h1>
    <div class="box" id="box" style="opacity: 0.3;"></div>
    <input type="button" value="开始" />
    <input type="button" value="结束" />
    <script>
        var box = document.getElementById("box");
        var start = document.getElementsByTagName("input")[0];
        var h = document.getElementsByTagName("h1")[0];
        // console.log();
        //透明度变化过程
        var now = parseFloat(getStyle(box,"opacity"));
        var timer;
        start.onclick = function(){
            timer = setInterval(move,50);
        };
        function move(){
            now += 0.02;
            //判断如果等于1,停止运动
            if(now >= 1){
                now = 1;
                clearInterval(timer);
            }
            // console.log(now);
            //赋值,必须兼容写法
            box.style.opacity = now;
            box.style.filter = "alpha(opacity=" + (now * 100) +")";
        }
        //console.log(now);
        //传入一个对象、和属性名,输出这个对象的对应的属性值
            function getStyle(obj,property){
                //兼容高版本和低版本浏览器,能力测试
                if(window.getComputedStyle){
                    //属性名必须是css写法,人为规范输入的属性名
                    property = property.replace(/([A-Z])/g,function(match,$1){
                        return "-" + $1.toLowerCase();
                    });
                    return window.getComputedStyle(obj)[property];
                }else if(obj.currentStyle){
                    //属性名必须是驼峰写法,人为规范输入的属性名
                    property = property.replace(/\-([a-z])/gi,function(match,$1){
                        return $1.toUpperCase();
                    });
                    return obj.currentStyle[property];
                }
            }
    </script>
</body>
</html>

多属性简单运动

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: skyblue;
            position: absolute;
            top: 100px;
            left: 0;            
            /*filter: alpha(opacity=30);*/
        }
    </style>
</head>
<body>
    <h1></h1>
    <div class="box" id="box"></div>
    <input type="button" value="开始" />
    <input type="button" value="结束" />
    <script>
        var box = document.getElementById("box");
        var start = document.getElementsByTagName("input")[0];

        //两个属性要变动:left从0变到400,width从100变到300,间隔时间50毫秒。
        //  全局信号量
        var nowleft = box.offsetLeft;
        var nowwidth = box.offsetWidth;
        var interval = 50;
        var timer; 
        start.onclick = function(){
            timer = setInterval(function(){
                //全局信号量变动
                nowleft += 10;
                nowwidth += (300 - 100) / ((300 - 0) / 10 );
                //判断
                if(nowleft >= 300){
                    //同时拉到终点
                    nowleft = 300;
                    nowwidth = 300;
                    clearInterval(timer);
                }
                //赋值
                box.style.left = nowleft + "px";
                box.style.width = nowwidth + "px";
            },interval);
        };
        //传入一个对象、和属性名,输出这个对象的对应的属性值
            function getStyle(obj,property){
                //兼容高版本和低版本浏览器,能力测试
                if(window.getComputedStyle){
                    //属性名必须是css写法,人为规范输入的属性名
                    property = property.replace(/([A-Z])/g,function(match,$1){
                        return "-" + $1.toLowerCase();
                    });
                    return window.getComputedStyle(obj)[property];
                }else if(obj.currentStyle){
                    //属性名必须是驼峰写法,人为规范输入的属性名
                    property = property.replace(/\-([a-z])/gi,function(match,$1){
                        return $1.toUpperCase();
                    });
                    return obj.currentStyle[property];
                }
            }
    </script>
</body>
</html>

封装运动框架

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style> 
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            top: 100px;
            left: 0;    
            opacity: 0.3;       
            filter: alpha(opacity=30);
        }
    </style>
</head>
<body>
    <h1></h1>
    <div class="box" id="box"></div>
    <input type="button" value="开始" />
    <input type="button" value="结束" />
    <script>
        var box = document.getElementById("box");
        var start = document.getElementsByTagName("input")[0];
        animate(box,{"width":400,"left":500,"height":400,"opacity":1},2000);
        // 封装运动函数
        function animate(obj,jieshuJson,time){
            //准备三个数据,开始的JSON,结束的JSON,还有步长JSON
            //开始JSON有多少个属性,由jieshuJson决定
            //给开始JSON添加新属性,来源于jieshuJson。
            var kaishiJson = {};
            for(var k in jieshuJson){
                //通过赋初始值,用到计算后样式,将字符串转数字
                //结束后的样式名k
                kaishiJson[k] = parseFloat(getStyle(obj,k));
            }
            //console.log(kaishiJson);
            //步长JSON = (jieshuJson - kaishiJson) / 总次数
            //总次数 = 总时间 / 间隔时间
            var interval = 50;
            var zongcishu = time / interval;
            //获得步长JSON
            var buchangJson = {};
            for(var k in jieshuJson){
                //避免输入的是字符串,先转数字
                jieshuJson[k] = parseFloat(jieshuJson[k]);
                buchangJson[k] = (jieshuJson[k] - kaishiJson[k]) / zongcishu;
            }
            // console.log(buchangJson);
            //============三个JSON都准备完了===============
            //程序部分
            //全局信号量接收初始值,每次的步长
            //定义信号量JSON
            var xinhaoliangJson = {};
            for(var k in kaishiJson){
                xinhaoliangJson[k] = kaishiJson[k];
            }
            //执行次数等于总次数,停止运动
            //累加器
            var cishu = 0;
            var timer ;
            timer = setInterval(function(){
                //每执行一次,次数增加
                cishu++;
                //信号量JSON每次加一个步长
                for(var k in xinhaoliangJson){
                    xinhaoliangJson[k] += buchangJson[k];
                }
                //验收,停止定时器
                if(cishu >= zongcishu){
                    //拉终停表
                    for(var k in xinhaoliangJson){
                        xinhaoliangJson[k] = jieshuJson[k];
                    }
                    clearInterval(timer);
                }
                //赋值,如果是透明度属性,需要单独设置
                for(var k in xinhaoliangJson){
                    if(k == "opacity"){
                        obj.style.opacity = xinhaoliangJson[k];
                        obj.style.filter = "alpha(opacity=" + xinhaoliangJson[k] * 100 +")";
                    }else{
                        obj.style[k] = xinhaoliangJson[k] + "px";
                    }
                }
            },interval);
        }

        //传入一个对象、和属性名,输出这个对象的对应的属性值
            function getStyle(obj,property){
                //兼容高版本和低版本浏览器,能力测试
                if(window.getComputedStyle){
                    //属性名必须是css写法,人为规范输入的属性名
                    property = property.replace(/([A-Z])/g,function(match,$1){
                        return "-" + $1.toLowerCase();
                    });
                    return window.getComputedStyle(obj)[property];
                }else if(obj.currentStyle){
                    //属性名必须是驼峰写法,人为规范输入的属性名
                    property = property.replace(/\-([a-z])/gi,function(match,$1){
                        return $1.toUpperCase();
                    });
                    return obj.currentStyle[property];
                }
            }
    </script>
</body>
</html>
» 转载请注明来源:若我若鱼 » js 系列(4) 透明度 简单运动

Leave a Reply

Your email address will not be published. Required fields are marked *

3 + six =