zoukankan      html  css  js  c++  java
  • jq hide show

     var $ = function (id) {
            return document.getElementById(id);
        }
        //返回dom元素的当前某css值
        var getCss = function (obj, name) {
            //ie
            if (obj.currentStyle) {
                return obj.currentStyle[name];
            }
            //ff
            else {
                var style = document.defaultView.getComputedStyle(obj, null);
                return style[name];
            }
        }
    
        var hide = function (obj, speed, fn) {
            obj = $(obj);
    
            if (!speed) {
                obj.style.display = 'none';
                return;
            }
            else {
                speed = speed === 'fast' ? 20 : speed === 'normal' ? 30 : 50;
                obj.style.overflow = 'hidden';
            }
            //获取dom的宽与高
            var oWidth = getCss(obj, 'width'), oHeight = getCss(obj, 'height');
            //每次dom的递减数(等比例)
            var wcut = 10 * (+oWidth.replace('px', '') / +oHeight.replace('px', '')), hcut = 10;
            //处理动画函数
            var process = function (width, height) {
                width = +width - wcut > 0 ? +width - wcut : 0;
                height = +height - hcut > 0 ? +width - hcut : 0;
                //判断是否减完了
                if (width !== 0 || height !== 0) {
                    obj.style.width = width + 'px';
                    obj.style.height = height + 'px';
    
                    setTimeout(function () {
                        process(width, height);
                    }, speed);
                }
                else {
                    //减完后,设置属性为隐藏以及原本dom的宽与高
                    obj.style.display = 'none';
                    obj.style.width = oWidth;
                    obj.style.height = oHeight;
                    if (fn)fn.call(obj);
                }
            }
            process(oWidth.replace('px', ''), oHeight.replace('px', ''));
        }
    
        var show = function (obj, speed, fn) {
    
            obj = $(obj);
    
            if (!speed) {
                obj.style.display = 'block';
                return;
            }
            else {
                speed = speed === 'fast' ? 20 : speed === 'normal' ? 30 : 50;
                obj.style.overflow = 'hidden';
            }
    
            var oWidth = getCss(obj, 'width').replace('px', ''), oHeight = getCss(obj, 'height').replace('px', '');
            var wadd = 10 * (+oWidth / +oHeight), hadd = 10;
    
            obj.style.width = 0 + 'px';
            obj.style.height = 0 + 'px';
            obj.style.display = 'block';
    
            var process = function (width, height) {
                width = +oWidth - width < wadd ? +oWidth : wadd + width;
                height = +oHeight - height < hadd ? oHeight : hadd + height;
    
                if (width !== +oWidth || height !== +oHeight) {
                    obj.style.width = width + 'px';
                    obj.style.height = height + 'px';
    
                    setTimeout(function () {
                        process(width, height);
                    }, speed);
                }
                else {
                    obj.style.width = oWidth + 'px';
                    obj.style.height = oHeight + 'px';
                    if (fn)fn.call(obj);
                }
            }
            process(0, 0);
        }
  • 相关阅读:
    [Android] UI疑问?
    [Android] Gradle sync failed: Unsupported method: BaseConfig.getApplicationIdSuffix().
    [Android] 使用GSON解析json成Bean
    2016工作总结
    【UE】关于UE的一个真实案例
    我在新蛋系的这八年
    关于在线预览word,excel,ppt,pdf的需求处理方法。
    【点滴积累,厚积薄发】windows schedule task中.exe程序的路径问题等问题总结
    【点滴积累,厚积薄发】windows schedule task的最小时间间隔是多少?
    【点滴积累,厚积薄发】修改hosts,并刷新dns缓存
  • 原文地址:https://www.cnblogs.com/human/p/3469036.html
Copyright © 2011-2022 走看看