模仿jquery写了隐藏显示函数show、hide，好用-蒲公英云

模仿jquery写了隐藏显示函数show、hide，好用

- 日理万妓 2021-07-25 02:01 335阅读 0赞

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GBK">
        </head>
        <body>
            <div id="div" style="width:70px;height:50px;background:skyblue;left:25%;"><p>div</p></div>
            <button onclick="do_show()">show Div</button>
            <button onclick="do_hide()">hide Div</button>
               <button onclick="do_toggle()">toggle Div</button> 
        </body>
<script>
//获取属性值
function getStyle(obj, prop) {
    var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;
    return prevComputedStyle[prop];
}
/*
    obj:dom对象
    prop:动画参数
    speed:执行速度 fast slow 3000等
    func:回调函数
*/
function animate(obj,prop,speed,func){
    //防止重复动画事件
    if(obj.timer) return ;
    //定义定时器执行次数和总执行时间
    var    limit=10,totalTime; 
    if(typeof speed==='number'){//如果传入的是
        totalTime = speed;
    }else if(speed==='slow'){
        totalTime = 600;
    }else if(speed==='fast'){
        totalTime = 200;
    }else{
        totalTime = 400;
    }
    var time = totalTime/limit;
    var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取
    obj.timer = setInterval(function(){
        n++;//执行次数每次递增
        for(var p in prop){
            if("display"===p) {
                display = prop["display"];
                if(display!=='none'){
                    obj.style['display'] = display;
                }
                delete prop["display"];
                continue;
            }
            //判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它
            var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性
            if(!reg.test(prop[p])){
                obj.style[p] = prop[p];
                delete prop[p];
                continue;
            }
            var value,opacityFlag=(p == "opacity")?true:false;
            var cur = 0;
            if(cache[p+"_cur"]){//从缓存中取
                cur = cache[p+"_cur"];
                value = cache[p+"_value"];
            }else{
                value = prop[p];
                if(opacityFlag) {
                    //如果本来是隐藏的则cur默认就是0
                    if(getStyle(obj, 'display')!=='none'){
                        cur = Math.round(parseFloat(getStyle(obj, p)) * 100);
                    }
                } else {
                    cur = parseInt(getStyle(obj, p));
                    //处理100px的格式
                    (typeof value==='string') && (value=value.replace(/px$/,""));
                }
                primary_cur=cur;
                cache[p+"_value"] = value;
            }
            var incre ;
            if(cache[p+'_increment']){//如果缓存中有则从中取
                incre = cache[p+'_increment'];
            }else{
                if(opacityFlag){
                    incre = (value*100-cur)/limit;//计算每次变化值
                }else{
                    incre = (value-cur)/limit;//计算每次变化值
                }
                cache[p+'_increment']= incre;
            }
            //缓存起来，这样就不用每次都去dom中获取了。
            cache[p+"_cur"] = cur + incre;
            if (opacityFlag) {
                //obj.style.filter = "alpha(opacity : '+(cur + incre)+' )";
                obj.style.opacity = (cur + incre)/100 ;
            }else {
                obj.style[p] = cur + incre + "px";
            }
        }
        //如果达到了最大执行次数，要清除定时器，并执行回调函数
        if(n==limit){
            if(display==='none'){
                obj.style['display'] = 'none';
            }
            //清除定时器
            clearInterval(obj.timer);
            obj.timer=undefined;
            func && func();
        }
    },time)
}
var div = document.getElementById("div");
/*
    obj:dom对象
    speed:执行速度 fast slow 3000等
    func:回调函数
*/
function hide(obj,speed,func){
    if(obj.style.display==='none'){
        return ;
    }
    //获取本来的宽带和高度
    var width = getStyle(obj, 'width');
    var height = getStyle(obj, 'height');
    var new_func = function(){
        //设置回原来的高度和宽度
        obj.style['width'] = width;
        obj.style['height'] = height ;
        func();
    }
    animate(obj,{opacity: 0,display:'none',width:0,height:0},speed,new_func);
}
function show(obj,speed,func){
    if(obj.style.display!=='none'){
        return ;
    }
    //获取本来的宽带和高度
    var width = getStyle(obj, 'width');
    var height = getStyle(obj, 'height');
    //设置从0开始
    obj.style['width'] = 0;
    obj.style['height'] = 0 ;
    animate(obj,{opacity: 1,display:'block',width:width,height:height},speed,func);
}
function toggle(obj,speed,func){
    if(obj.style.display==='none'){
        show(obj,speed,func);
    }else{
        hide(obj,speed,func);
    }
}
//执行显示
function do_show(){
    //执行速度 fast slow 3000等
    show(div,1000,function(){
        console.log('show_finished')
    })
}
//执行隐藏
function do_hide(){
    //执行速度 fast slow 3000等
    hide(div,1000,function(){
        console.log('hide_finished')
    })
}
function do_toggle(){
    toggle(div,'slow',function(){
        console.log('toggle_finished')
    });
}
</script>
</html>