首页 > 代码库 > javascript原生360 开机小动画

javascript原生360 开机小动画

2024-09-11 14:53:50   218人阅读

技术分享

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 322px;
            position: fixed;
            bottom:0;
            right:0;
        }
        span{
            position: absolute;
            top:0;
            right:0;
            width:30px;
            height: 20px;
            cursor: pointer;
        }
    </style>
    <script src=http://www.mamicode.com/"../jquery1.0.0.1.js"></script>
    <script>
        // window.onload = function () {
        //     //需求：下面的盒子高度变为0，然后大盒子的宽在变为0.
        //     var guanbi = document.getElementById("guanbi");
        //     var box = guanbi.parentNode;

        //     var b = document.getElementById("b");

        //     guanbi.onclick = function () {
        //         //下面的盒子高度变为0，然后大盒子的宽在变为0.
        //         animate(b,{"height":0}, function () {
        //             animate(box,{"width":0});
        //         });
        //     }
        // }
        // 
        
        window.onload=function(){
            var oClose=document.getElementById("guanbi");
            var oBox=document.getElementsByTagName("div")[0];
            
            var oB=document.getElementById("b");

            oClose.onclick=function(){
                animate(oB,{"height":0},function(){
                    animate(oBox,{"width":0});
                });
            }
        }

    </script>
</head>
<body>
    <div class="box">
        <span id="guanbi"></span>
        <div class="hd" id="t">
            <img src=http://www.mamicode.com/"images/t.jpg" alt=""/>
        </div>
        <div class="bd" id="b">
            <img src=http://www.mamicode.com/"images/b.jpg" alt=""/>
        </div>
    </div>
</body>
</html>

引入原生Javascript

/**
 * Created by Lenovo on 2016/9/11.
 */
function show(ele){
    ele.style.display = "block";
}

/**
 * 获取元素样式兼容写法
 * @param ele
 * @param attr
 * @returns {*}
 */
function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele,null)[attr];
    }
    return ele.currentStyle[attr];
}

//参数变为3个
function animate(ele,json,fn){
    //先清定时器
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        //开闭原则
        var bool = true;


        //遍历属性和值，分别单独处理json
        //attr == k(键)    target == json[k](值)
        for(var k in json){
            //四部
            var leader = parseInt(getStyle(ele,k)) || 0;
            //1.获取步长
            var step = (json[k] - leader)/10;
            //2.二次加工步长
            step = step>0?Math.ceil(step):Math.floor(step);
            leader = leader + step;
            //3.赋值
            ele.style[k] = leader + "px";
            //4.清除定时器
            //判断: 目标值和当前值的差大于步长，就不能跳出循环
            //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。
            if(json[k] !== leader){
                bool = false;
            }
        }

        console.log(1);
        //只有所有的属性都到了指定位置，bool值才不会变成false；
        if(bool){
            clearInterval(ele.timer);
            //所有程序执行完毕了，现在可以执行回调函数了
            //只有传递了回调函数，才能执行
            if(fn){
                fn();
            }
        }
    },1);
}



//获取屏幕可视区域的宽高
function client(){
    if(window.innerHeight !== undefined){
        return {
            "width": window.innerWidth,
            "height": window.innerHeight
        }
    }else if(document.compatMode === "CSS1Compat"){
        return {
            "width": document.documentElement.clientWidth,
            "height": document.documentElement.clientHeight
        }
    }else{
        return {
            "width": document.body.clientWidth,
            "height": document.body.clientHeight
        }
    }
}

 

javascript原生360 开机小动画


联系
我们