转自:http://blog.csdn.net/smartview/archive/2009/02/13/3887669.aspx
scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离之完全详解
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 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>无标题文档</title>
- </head>
- <body>
- <div id="marquee_demo" style="overflow:auto;width:500px;text-align:center;border:1px solid #ccc">
- <table cellspacing="0" cellpadding="3" align="center" border="0">
- <tr>
- <td id="marquee_product1" valign="top">
- <table width="800" height="100" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">1</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">2</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">3</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">4</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">5</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">6</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">7</td>
- <td width="180" align="center" style="padding:3px 15px 3px 15px;" mce_style="padding:3px 15px 3px 15px;">8</td>
- </tr>
- </table>
- </td>
- <td id="marquee_product2" valign="top"></td>
- </tr>
- </table>
- </div>
- <mce:script type="text/javascript"><!--
- var speed=30;
- document.getElementById("marquee_demo").scrollLeft=0;
- /*marquee_product2 = document.getElementById('marquee_product2');
- marquee_product1 = document.getElementById('marquee_product1');
- marquee_demo = document.getElementById('marquee_demo');*/
- //alert(document.getElementById("marquee_demo").scrollLeft);
- //alert(document.getElementById("marquee_product1").scrollWidth);
- document.getElementById("marquee_product2").innerHTML=document.getElementById("marquee_product1").innerHTML;
- //document.getElementById("marquee_product1").innerHTML+=document.getElementById("marquee_product1").innerHTML;
- function Marquee(){
- if(document.getElementById("marquee_demo").scrollLeft>=document.getElementById("marquee_product1").scrollWidth){
- document.getElementById("marquee_demo").scrollLeft=0;
- }
- else{
- document.getElementById("marquee_demo").scrollLeft++;
- }
- }
- var MyMar=setInterval(Marquee,speed);
- document.getElementById("marquee_demo").οnmοuseοver=function(){clearInterval(MyMar);}
- document.getElementById("marquee_demo").οnmοuseοut=function(){MyMar=setInterval(Marquee,speed);}
- // --></mce:script>
- </body>
- </html>