DIV经典滑动收缩与展开效果【完全参考Ext效果】

<input type="button" id="dddd" value="click" onclick="AAAA(.5)"/> <div id="panel_div_1"
style="position:relative;width:1000px;height:900px;border: 1px solid black;overflow:hidden;">
<div id="panel_div"
style="position:absolute;bottom:0px;left:0px;overflow:hidden;width:10 0%;height:900px;background-image: url('1.jpg');background-repeat: repeat;">
</div>
</div>
<script type="text/javascript">
var startTime;
var panelObj;
var panelHeight;
var duration_ms;
var isExtends = true;
function AAAA(dur){
startTime = new Date();
panelObj = document.getElementById("panel_div_1");
duration_ms = dur * 1000;
if(isExtends){
panelHeight = parseInt(panelObj.style.height);
BBBB();
}else{
CCCC();
}
}
var EE = function(F, E, H, G){
//alert("F:" + F + "--E:" + E +"--H:"+H + "--G:"+G + "(F /= G):" + (-1 * H * (F /= G) * (F - 2) + E));
//H * F / G + E
/**
* H 高的相反数，F 时间差毫秒数，G总共时间毫秒数，E高
*
*/
return -1 * H * (F /= G) * (F - 2) + E;
}
var index = 0;
function BBBB(){
if(index < duration_ms){
index++;
var curDate = new Date();
var diffMS = Math.abs(curDate - startTime);
var diffMS_Index = 0;
if(diffMS < duration_ms){
diffMS_Index = Math.round(diffMS - index);
}else{
diffMS_Index = Math.round(duration_ms - (index + 1));
}
if(diffMS_Index > 0){
index += diffMS_Index;
}
var curHeight = EE(index, panelHeight, (-panelHeight), duration_ms);
panelObj.style.height = curHeight + "px";
window.setTimeout(BBBB, 0);
}else{
panelObj.style.height = 0 + "px";
index = 0;
isExtends = false;
}
}
function CCCC(){
if(index < duration_ms){
index++;
var curDate = new Date();
var diffMS = Math.abs(curDate - startTime);
var diffMS_Index = 0;
if(diffMS < duration_ms){
diffMS_Index = Math.round(diffMS - index);
}else{
diffMS_Index = duration_ms - (index + 1);
}
if(diffMS_Index > 0){
index += diffMS_Index;
}
var curHeight = EE(index, 0, (panelHeight), duration_ms);
panelObj.style.height = curHeight + "px";
window.setTimeout(CCCC, 0);
}else{
panelObj.style.height = panelHeight + "px"; index = 0;
isExtends = true;
}
}
</script>。