IE兼容型运动框架代码,Css代码库,德仔网

代码语言

代码分类

【Css】 IE兼容型运动框架

作者:amandag / 发布于2016/9/20/ 538

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            position: relative;
        }
        div{
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0px;
            background-color: blue;
            top: 100px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<button id="btn">开始</button>
<button id="btn1">开始</button>
<div id="box"></div>
</body>
</html>
<script src="animate.js"></script>
<script>
    var btn = document.getElementById("btn");
    var btn1 = document.getElementById("btn1");
    var box = document.getElementById("box");
    btn.onclick = function(){
        animate(box,{width: 200, top: 100,left: 200,opacity:40,zIndex:3},function(){alert(11)});
    }
    btn1.onclick = function(){
        animate(box,{top:300});
    }
    function getStyle(obj,attr){//得到对象属性值
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else {
        return window.getComputedStyle(obj,null)[attr];
    }
}
//json运动框架
function animate(obj,json,fn){
    clearInterval(obj.timer);//清楚定时器
    //开启定时器
    obj.timer = setInterval(function(){
        //定时器开关按钮
        var flag =true ;
        for(var k in json){
            var current = 0;
            if(k == "opacity"){//判断是否为透明度
                current = Math.round(parseInt(getStyle(obj,k)*100)||0);
            }
            else current = parseInt(getStyle(obj,k));
            var step = (json[k] - current)/10 ;
            step = step>0? Math.ceil(step):Math.floor(step);
            if(k=="opacity"){
                if("opacity" in obj.style){
                    obj.style.opacity = (current + step)/100;
                }
                else {
                    obj.style.filter = "alpha( opacity ="+(current + step)*10+")";
                    console.log( obj.style.filter);
                }
            }
            else if(k=="zIndex"){
                obj.style.zIndex = json[k];
            }
            else {
                obj.style[k] = current+step+"px";
            }
            if(current != json[k]){
                flag=false;
            }
        }
        //条件满足，定时器关闭
        if(flag){
            clearInterval(obj.timer);
            //回调函数
            if(fn){
                fn();
            }
        }
    },30)
}
</script>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

amandag贡献的其它代码(12)