scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Slider Show Demo - http://www.never-online.net </title>
<meta http-equiv="ImageToolbar" content="no" />
<style type="text/css" media="all" title="Default">
* {
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin:0;
}
body {
font-size:10pt;
text-align:center;
}
.sliderShowBox {
border:1px solid #333;
visibility:hidden;
position:absolute;
background-color:#eee;
overflow:hidden;
width:250px;
text-align:left;
}
.sliderShowContent {
padding:5px;
}
</style>
<script type="text/javascript">
//<![CDATA[
var sliderActive = false;//是否是在动画的过程中
var sliderTimer = null;
function effect_sliderShow (sliderActId, sliderBoxId)
{
if (sliderActive) return;
sliderActive = true;
//javascript:effect_sliderShow(this,'sliderShowBox')
var sliderAct = $(sliderActId);//得到点击的元素，以便得到坐标作动画
var sliderBox = $(sliderBoxId);//得到tip的容器
var sliderHeight = parseInt(sliderBox.style.height)||sliderBox.offsetHeight;
//因为我们使tip的容器不可见用的是css里的visible，
//所以可以得到容器的高度，如果用display为none，则是得不到元素的高度的。但可以自定义容器的高度
var visibility = sliderBox.style.visibility;//容器是否可见
var sliderSpeed = 10;
//动画的速度，值越小，则越快，
//说明一点，其实用到10已经将近是极限了，
//你可以将这个值改为0，事实上与10相差无几。为何如此？先做一个悬念吧，也做为一个思考:D
if (visibility=="visible")
{
//如果容器当前是可见的，这里就执行关闭动画
sliderBox.style.visibility="visible";//将容器设为可见
sliderBox.style.top = sliderAct.offsetTop+sliderAct.offsetHeight+"px";//容器的Y坐标=相对元素的Y坐标+相对元素的高度
sliderBox.style.left = sliderAct.offsetLeft+"px";//容器X坐标与相对元素的X坐标相同
sliderBox.style.height = sliderHeight+"px";//动画初始高度为TIP容器的原始高度
animateClose();
}
else
{
sliderBox.style.visibility="visible";//将容器设为可见
sliderBox.style.top = sliderAct.offsetTop+sliderAct.offsetHeight+"px";//容器的Y坐标=相对元素的Y坐标+相对元素
sliderBox.style.left = sliderAct.offsetLeft+"px";//容器X坐标与相对元素的X坐标相同
sliderBox.style.height = "1px";//动画初始高度为1像素
animateShow();
}
function animateShow()
{
var h = parseInt(sliderBox.style.height)||0;//得到容器的高度
if (h >= sliderHeight)
{
//如果高度>原始高度，则清除timeout，并返回
sliderBox.style.height = sliderHeight+'px';//将容器高度复原
window.clearTimeout(sliderTimer);
return sliderActive=false;
}
//容器高度+1并递归此显示函数
sliderBox.style.height = h+1 +"px";
sliderTimer=window.setTimeout(animateShow, sliderSpeed);
};
function animateClose()
{
var h = parseInt(sliderBox.style.height)||sliderHeight;//得到容器的高度
if (h<=1)
{//如果高度<1，则清除timeout，并返回
sliderBox.style.height = sliderHeight+'px';//将容器高度复原，否则下次容器的原始高度就为1像素了
sliderBox.style.visibility="hidden";
window.clearTimeout(sliderTimer);
return sliderActive=false;
}
//容器高度-1并递归此关闭函数
sliderBox.style.height = h-1 +"px";
sliderTimer=window.setTimeout(animateClose, sliderSpeed);
};
//此函数的功能为得到一个元素的引用，参数可用元素ID或者元素对象
function $ (objId)
{
if (typeof(objId)=="object") return objId;
return document.getElementById(objId);
};
};
//]]>
</script>
</head>
<body id="www.never-online.net">
<h1> Slider Show Demo </h1>
<hr/>
<a href="###" onclick="javascript:effect_sliderShow(this,'sliderShowBox')">click show setTimeout demo</a>
<div class="sliderShowBox" id="sliderShowBox">
<div class="sliderShowContent">
sliderShow<br/>tutorial of DHTML and javascript programming<br/>by never-online, never-online.net
</div>
</div>
</body>
</html>
