Question

用javascript控制div的显示从下方逐渐出现

Answer 1

//html 
<div id="show">show</div>
//css;
#show {width: 100px;height: 100px; background: #ccc; display: none;}
//js file;
window.onload = function () {
	//根据ID返回dom元素 
	var $ = function(id){return document.getElementById(id);} 
	//返回dom元素的当前某css值 
	var getCss = function(obj,name){ 
		if(obj.currentStyle) {//for ie ;
			return obj.currentStyle[name]; 
		}else { // for ff;
			var style = document.defaultView.getComputedStyle(obj,null); 
			return style[name]; 
		} 
	} 
	
	var show = function(obj,speed){ 
		obj = $(obj); 
		if (!speed) { 
			obj.style.display = 'block'; 
			return; 
		}
	var initH = 0 , initW = 0;
	//获取dom的宽与高 
	var oWidth = getCss(obj,'width').replace('px',''), oHeight = getCss(obj,'height').replace('px',''); 
	//每次dom的递减数(等比例) 
	var wcut = 2*(+oWidth.replace('px','') / +oHeight.replace('px','')),hcut = 2; 
	//处理动画函数 
	var process = function(){ 
	        obj.style.overflow = 'hidden';
		obj.style.display = 'block';
		initW = (initW+wcut) > oWidth ? oWidth : initW+wcut; 
		initH = (initH+hcut) > oHeight ? oHeight : initH+hcut; 
		//判断是否减完了 
		if(initW !== oWidth || initH !== oHeight) { 
			//obj.style.width = initW+'px'; 
			obj.style.height = initH+'px'; 

		setTimeout(function(){process();},speed); 
		}else { 
			//加完后，设置属性为显示以及原本dom的宽与高; 
			//obj.style.width = oWidth+'px';
			obj.style.height = oHeight+'px';
			
		} 
	} 
		process(); 
	} 
	show("show",50);	
}

Answer 2

1. javascript操作对象略显麻烦，建议采用Jquery.

2. Jquery代码如下

$("button").click(function(){
  $("div").animate({bottom:'250px'});
});

Answer 3

用jquery的话，有现成的方法。slideout和slidein方法。
用javascript写的话，需要用setInterval方法，不断的改变div的top来实现。

Answer 4

functionchangeBody(index){switch(index){case1:{document.getElementById('iDBody1').style.display="";document.getElementById('iDBody2').style.display="none";document.getElementById('iDBody3').style.display="none";}case2:{document.getElementById('iDBody1').style.display="none";document.getElementById('iDBody2').style.display="";document.getElementById('iDBody3').style.display="none";}case3:{document.getElementById('iDBody1').style.display="none";document.getElementById('iDBody2').style.display="none";document.getElementById('iDBody3').style.display="";}}}