zoukankan      html  css  js  c++  java
  • 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英寸标准封闭式机柜,长宽高分别为110cm60cm200cm;</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)
    }
    
    
  • 相关阅读:
    Lucene in action 笔记 case study
    关于Restful Web Service的一些理解
    Lucene in action 笔记 analysis篇
    Lucene in action 笔记 index篇
    Lucene in action 笔记 term vector
    Lucene in action 笔记 search篇
    博客园开博记录
    数论(算法概述)
    DIV, IFRAME, Select, Span标签入门
    记一个较困难的SharePoint性能问题的分析和解决
  • 原文地址:https://www.cnblogs.com/ae6623/p/4687857.html
Copyright © 2011-2022 走看看