JavaScript原生折叠扩展收缩菜单带缓冲动画

JavaScript原生折叠扩展收缩菜单带缓冲动画 @落雨

 <div id="div_two" style="display: none;">
            <p class="p1">机房介绍</p>
            <div class="hide_jie">
                <p>上海三门路数据中心</p>
                位于上海市杨浦区三门路561号1楼C1室，一期机架数量200个，总规划机架数量500个，主要服务于华东地区的IDC应用及全国范围内的企业云计算需求。机房内拥有电信、联通、移动和BGP八线资源，总带宽超过40G，上海本地点对点传输及上海到浙江、北京等方向的长途传输；上海到香港，东南亚，美国等地的国际专线资源。、 是上海地区网络品质最高，服务最优质的数据中心。
            </div>
            <div class="show_1"  onClick="spread('show_1_ct_1',this);">
                机房简介
                <div class="show_right">
                    <img class="show_img" src="img/show_btn.png">
                </div>
            </div>
            <div id="show_1_ct_1" class="show_1_ct" style="display: none;">
                <ul class="ul1">
                    <li><span class="sp1"> </span><span></span> 机房总面积2500平米，一期面积1100平方米，8级抗震建筑结构</li>
                    <li><span class="sp1"> </span> <span> </span>机房位于一楼，承重>1000公斤/平方米,绝缘地板设计，防电磁干扰设施</li>
                    <li><span class="sp1"> </span><span>  </span>T3+级国际标准建造,先进的节能环保设计</li>
                    <li><span class="sp1"> </span><span> </span>充足的电力保障,丰富的网络资源</li>
                    <li><span class="sp1"> </span><span> </span>优质的机房环境，优越的地理位置，便捷的交通线路</li>
                    <li><span class="sp1"> </span><span> </span>全方位的业务范围,全面的管理、配套服务</li>
                </ul>
            </div>
            <div class="show_1" onClick="spread('show_1_ct_2',this);">
                综合布线
                <div class="show_right">
                    <img class="show_img" src="img/show_btn.png">
                </div>
            </div>
            <div id="show_1_ct_2" class="show_1_ct" style="display: none;">
                <ul class="ul1">
                    <li><span class="sp1"> </span><span></span>分层走线，隐蔽、美观;</li>
                    <li><span class="sp1"> </span> <span> </span>桥架三层结构，由下至上分别以强电、光纤、弱电分布;</li>
                    <li><span class="sp1"> </span><span>  </span>中层以光纤分隔防止强电信号干扰;</li>
                    <li><span class="sp1"> </span><span> </span>下层地面涂防水胶，加上3层抗静电、防尘漆。保证下层温度、湿度及清洁;</li>
                </ul>
            </div>
            <div class="show_1"  onClick="spread('show_1_ct_3',this);">机柜布置
                <div class="show_right">
                    <img class="show_img" src="img/show_btn.png">
                </div>
            </div>
            <div class="show_1_ct" id="show_1_ct_3" style="display: none;">
                <ul class="ul1">
                    <li><span class="sp1"> </span><span></span>采用19英寸标准封闭式机柜，长宽高分别为110cm\60cm\200cm;</li>
                    <li><span class="sp1"> </span> <span> </span>所有标准机柜设有锁定功能，布放单模、多模的光纤和网线的集线排;</li>
                    <li><span class="sp1"> </span><span>  </span>机柜全部预布放超五类线缆;</li>
                    <li><span class="sp1"> </span><span> </span>机柜组全部布放多模及单模光纤;</li>
                    <li><span class="sp1"> </span><span> </span>骨干布线桥架由配线间接入各个机房区域，提供灵活、冗余的布线方式;</li>
                    <li><span class="sp1"> </span><span> </span>机柜布线全部采用国际著名品牌，实现光纤、铜缆分桥架布设。</li>
                </ul>
            </div>
            <div class="show_1" onClick="spread('show_1_ct_4',this);">供电系统
                <div class="show_right">
                    <img class="show_img" src="img/show_btn.png">
                </div>
            </div>
            <div class="show_1_ct" id="show_1_ct_4" style="display: none;">
                <ul class="ul1">
                    <li><span class="sp1"> </span><span></span>两路通信市电高压供电系统，每路供电容量1600KVA，主备自动切换;</li>
                    <li><span class="sp1"> </span> <span> </span>双路冗余大功率智能台达（delta）UPS，1+1冗余备份，后备蓄电池全负载供电时间≥30min;</li>
                    <li><span class="sp1"> </span><span>  </span>网络运行中心（NOC）24小时监测;</li>
                    <li><span class="sp1"> </span><span> </span>康明斯+马拉松 柴油供电系统，满载油机备油持续供电时间≥48h.;</li>
                </ul>
            </div>

/**
 * 展开与收缩
 * @param  {[type]} ObjectId [description] 需要操作的ID
 * @param  {[type]} me       [description] 当前对象,非必须
 * @return {[type]}          [description]
 */
function spread(ObjectId, me) {

    var img = me.getElementsByTagName('img')[0];

    if ($X(ObjectId).style.display == 'none') {
        me.style.color = '#34a8bf';
        Start(ObjectId, 'Opens');
        //替换右边小图标
        img.src="img/show_btn1.png";

    } else {
        me.style.color = '#000';
        Start(ObjectId, 'Close');
        img.src="img/show_btn.png";
    }
}

/**
 * 根据ID返回对象
 * @param  {[type]} Read_Id [description]
 * @return {[type]}         [description]
 */
function $X(Read_Id) {
    return document.getElementById(Read_Id);
}

/**
 * 开始动画+收缩啊啊啊啊啊啊啊啊
 * @param {[type]} ObjId  [description]
 * @param {[type]} method [description]
 */
function Start(ObjId, method) {
    var oo = $X(ObjId);
    var firstH = oo.offsetHeight; //获取对象高度
    firstH = firstH == 0 ? '300px' : firstH;
    if (method == "Close") {

        startrun(oo, "height", 0, function() {
            oo.style.display = "none";
        }, 'close');

    } else if (method == "Opens") {
        oo.style.display = "block";
        oo.style.height = 0;

        startrun(oo, "height", 300, function() {

        }, 'close');

        //oo.style.height = firstH;
    }

}

/**
 * 获得Style属性
 * @param  {[type]} obj  [description]
 * @param  {[type]} name [description]
 * @return {[type]}      [description]
 */
function getstyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name];
    } else {
        return getComputedStyle(obj, false)[name];
    }
}

/**
 * 动画库
 * @param  {[type]}   obj    [description]
 * @param  {[type]}   attr   [description]
 * @param  {[type]}   target [description]
 * @param  {Function} fn     [description]
 * @param  {[type]}   action [description]
 * @return {[type]}          [description]
 */
function startrun(obj, attr, target, fn, action) {

    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var cur = 0;

        obj.style.overflow = 'hidden';

        if (attr == "opacity") {
            cur = Math.round(parseFloat(getstyle(obj, attr)) * 100);
        } else {
            cur = parseInt(getstyle(obj, attr));
        }
        var speed = (target - cur) / 8;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if (cur == target) {
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        } else {
            if (attr == "opacity") {
                obj.style.filter = "alpha(opacity=" + (cur + speed) + ")";
                obj.style.opacity = (cur + speed) / 100;
            } else {
                obj.style[attr] = cur + speed + "px";
            }
        }

        if (action == 'open') {
            //obj.style.display = "block";
        } else {
            //obj.style.display = "none";
        }

    }, 30)
}