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)
}
