이미지가 흰색으로 순환하지 않음

<div id=demo style=overflow:hidden;height:200;width:150> 

	<div id=demo1>

		<img src='/img/200406301.jpg'><br>

		<img src='/img/200406302.jpg'><br>

		<img src='/img/200406303.jpg'><br>

		<img src='/img/200406304.jpg'><br>

		<img src='/img/200406305.jpg'><br>

	</div>

	<div id=demo2></div>

</div>

<script>

var speed=30;

demo2.innerHTML=demo1.innerHTML

function Marquee()

{

	if(demo2.offsetTop-demo.scrollTop<=0)

		demo.scrollTop-=demo1.offsetHeight;

	else 

		demo.scrollTop++;

}

var MyMar=setInterval(Marquee,speed)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}

</script>

</body>

offsetLeft、clientHeight、scrollLeft、clientLeft
2009년 06월 04일 목요일 오후 04:03
1、offsetLeft
obj가 HTML 컨트롤이라고 가정합니다.
obj.offsetTop은 obj 거리 위나 위쪽 컨트롤의 위치, 정형, 단위 픽셀을 가리킨다.
obj.offsetLeft는 obj가 왼쪽이나 상단 컨트롤에서 떨어진 위치, 정형, 단위 픽셀을 가리킨다.
obj.offsetWidth는 obj 컨트롤 자체의 너비, 정형, 단위 픽셀을 가리킨다.
obj.offsetHeight는 obj 컨트롤 자체의 높이, 정형, 단위 픽셀을 가리킨다.
앞에서 언급한 '위쪽 또는 위쪽' 과 '왼쪽 또는 위쪽' 컨트롤에 대해 설명합니다.
예를 들면 다음과 같습니다.

'제출' 단추의offsetTop은 '제출' 단추가 'tool' 층의 상단 경계선에서 떨어지는 거리를 가리킨다. 왜냐하면 상단 경계선에서 가장 가까운 것은 'tool' 층의 상단 경계선이기 때문이다.
'리셋' 단추의offsetTop은 '리셋' 단추가 'tool' 층의 상단 경계선에서 떨어지는 거리를 가리킨다. 왜냐하면 상단 경계선에서 가장 가까운 것은 'tool' 층의 상단 경계선이기 때문이다.
'제출' 단추의offsetLeft는 '제출' 단추가 'tool' 층의 왼쪽 테두리에서 떨어지는 거리를 가리킨다. 왜냐하면 왼쪽에서 가장 가까운 것은 'tool' 층의 왼쪽 테두리이기 때문이다.
'리셋' 단추의offsetLeft는 '리셋' 단추가 '제출' 단추의 오른쪽 경계선에서 떨어지는 거리를 가리킨다. 왜냐하면 왼쪽에서 가장 가까운 것은 '제출' 단추의 오른쪽 경계선이기 때문이다.
위의 속성은 FireFox에서도 사용할 수 있습니다.
또한: 여기에서 말하는 것은 HTML 컨트롤의 속성 값이지 문서가 아닙니다.body,document.바디의 값은 서로 다른 브라우저에서 서로 다른 해석이 있습니다. (실제로 대부분의 환경은 문서.바디에 대한 해석이 다르기 때문에 발생한 것이지 오프셋에 대한 해석이 다르기 때문에 발생한 것이 아닙니다.) 여기를 클릭하여 다른 점을 보십시오.
제목:offsetTop 및 스타일.top의 차이점
예비지식:offsetTop,offsetLeft,offsetWidth,offsetHeight
offsetTop은 HTML 요소의 위쪽이나 바깥쪽 요소의 위치, 스타일을 얻을 수 있음을 알고 있습니다.top도 가능합니다. 양자의 차이점은:
1,offsetTop은 숫자를 반환하고 스타일.top는 문자열을 되돌려줍니다. 숫자 외에 단위가 있습니다: px.
2. 오프셋 탑은 읽기만 하고 스타일.읽기/쓰기 가능
3. HTML 요소에 top 스타일을 지정하지 않으면 스타일.top에서 반환하는 문자열은 빈 문자열입니다.
offsetLeft 및 스타일.left, offsetWidth 및 스타일.width,offsetHeight,style.하이트도 마찬가지다.
제목:clientHeight,offsetHeight,scrollHeight
우리는 여기에서 네 가지 브라우저가 문서에 대해 이야기한다.body의client Height,offset Height,scroll Height의 설명, 여기 말하는 것은document입니다.body, HTML 컨트롤이면 다릅니다. 여기를 클릭하여 보십시오.
IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox) 등 네 가지 브라우저가 있습니다.
2、clientHeight
clientHeight
모두는clientHeight에 대해 이의가 없다. 모두 내용을 볼 수 있는 영역의 높이라고 생각한다. 즉, 페이지 브라우저에서 내용을 볼 수 있는 이 영역의 높이는 보통 마지막 도구막대 아래에서 상태막대 이상까지의 이 구역으로 페이지 내용과 무관하다.
offsetHeight
IE, Opera는 offsetHeight = clientHeight + 스크롤 바 + 테두리라고 생각합니다.
NS, FF는 오프셋 하이라이트가 웹 콘텐츠의 실제 높이로 client Height보다 작을 수 있다고 주장했다.
scrollHeight
IE, Opera는 scroll Height가 웹 페이지 내용의 실제 높이로 client Height보다 작을 수 있다고 생각한다.
NS, FF는 scroll Height를 웹 페이지의 내용 높이로 생각하지만 최소값은client Height이다.
간단히 말하다
clientHeight는 브라우저를 통해 내용을 보는 이 영역의 높이입니다.
NS,FF는offsetHeight와scrollHeight가 모두 웹 콘텐츠의 높이라고 주장하지만 웹 콘텐츠의 높이가clientHeight보다 작을 때scrollHeight의 값은clientHeight이고 offsetHeight는clientHeight보다 작을 수 있다.
IE, Opera는offsetHeight가 가시 영역clientHeight 스크롤 막대에 테두리를 덧붙인다고 생각합니다.scrollHeight는 웹 페이지 내용의 실제 높이다.
같은 도리
clientWidth,offsetWidth,scrollWidth의 설명은 위와 같으며 높이를 너비로 바꾸면 된다.
그렇지만
FF는 서로 다른 DOCTYPE에서clientHeight에 대한 해석이 다르고 xhtml1 trasitional에서는 위에서 설명한 것이 아니다.다른 브라우저에서는 이 문제가 없습니다.
제목: scrollTop, scrollLeft, scrollWidth, scrollHeight
3、scrollLeft
scrollTop은 볼륨의 높이 값입니다. 예:


var p = document.getElementById("p");
p.scrollTop = 10;

외부 요소 p에 대해 scrollTop이 설정되어 있기 때문에 내부 요소는 위로 볼륨됩니다.
scroll Left도 비슷한 이치다.
우리는 오프셋 하이트가 자신의 원소의 너비라는 것을 이미 알고 있다.
반면 scrollHeight는 내부 요소의 절대 너비로 내부 요소의 숨겨진 부분을 포함한다.
상기 p의 scroll Height는 300이고 p의 offset Height는 100이다.
scrollWidth도 비슷한 이치다.
IE와FireFox는 전면적으로 지원하지만 Netscape와 Opera는 scrollTop, scrollLeft (document.body 제외) 를 지원하지 않습니다.
발표시간: 2007-10-15 20:20:16
제목: offsetTop, offsetLeft, offsetWidth, offsetHeight
4、clientLeft 
대상의offsetLeft 속성 값과 현재 창 왼쪽의 실제 값 사이의 거리를 되돌려줍니다. 경계선의 길이로 이해할 수 있습니다
offsetLeft,offsetTop,scrollLeft,scrollTop 이 몇 가지 방법에 대해 헷갈려서 하루 동안 열심히 공부했습니다. 다음과 같은 결과가 나왔습니다.
1.offsetTop     :
현재 대상의 상급 층 상단까지의 거리.
값을 부여할 수 없습니다.대상이 페이지 맨 위까지의 거리를 설정하려면 스타일을 사용하십시오.top 속성.
2.offsetLeft :
현재 대상의 상급층 왼쪽까지의 거리.
값을 부여할 수 없습니다.대상의 페이지 왼쪽까지의 거리를 설정하려면 스타일을 사용하십시오.left 속성.
3.offsetWidth :
현재 객체의 너비입니다.
스타일과.width 속성의 차이점은 대상의 넓이가 백분율 넓이로 설정되면 페이지가 커지든 작아지든 스타일입니다.width는 모두 이 백분율을 되돌려주고,offsetWidth는 백분율 값이 아닌 다른 페이지에서 대상의 너비 값을 되돌려줍니다
4.offsetHeight :
스타일과.height 속성의 차이점은 대상의 너비가 백분율 높이로 설정되면 페이지가 커지든 작아지든 스타일입니다.Height는 모두 이 백분율을 되돌려주고,offsetHeight는 백분율 값이 아닌 다른 페이지에서 대상의 높이 값을 되돌려줍니다
5.offsetParent   :
현재 대상의 상급 대상.
주의하다.객체가 하나의 DIV에 포함된 경우 이 DIV는 객체의 상위 레벨로 간주되지 않으며, 즉, 객체의 상위 레벨이 DIV 객체를 건너뛸 경우 상위 레벨이 Table인 경우 문제가 되지 않습니다.
이 속성을 이용하면 현재 대상이 서로 다른 크기의 페이지에서 절대적인 위치를 얻을 수 있다.
절대 위치 스크립트 코드 가져오기
1function GetPosition(obj)
2{
3 var left = 0;
4 var top   = 0;
5
6 while(obj != document.body)
7 {
8        left = obj.offsetLeft;
9        top   = obj.offsetTop;
10
11        obj = obj.offsetParent;
12 }
13
14 alert("Left Is : "+ left + "\r"+ "Top   Is : "+ top);
15}
6.scrollLeft :
대상의 가장 왼쪽에서 대상이 현재 창에 표시된 범위 내의 왼쪽까지의 거리.
즉, 가로 스크롤 바가 나타난 상황에서 스크롤 바가 당기는 거리이다.
7.scrollTop
객체의 맨 위에서 객체가 현재 창에 표시되는 범위 내의 맨 위 모서리까지의 거리입니다.
즉, 세로 스크롤 바가 나타난 상황에서 스크롤 바가 당기는 거리이다.
우리는 여기에서 네 가지 브라우저가 문서에 대해 이야기한다.body의client Height,offset Height,scroll Height의 설명, 여기 말하는 것은document입니다.body, HTML 컨트롤이면 다릅니다. 여기를 클릭하여 보십시오.
IE(Internet Explorer), NS(Netscape), Opera, FF(FireFox) 등 네 가지 브라우저가 있습니다.
clientHeight
모두는clientHeight에 대해 이의가 없다. 모두 내용을 볼 수 있는 영역의 높이라고 생각한다. 즉, 페이지 브라우저에서 내용을 볼 수 있는 이 영역의 높이는 보통 마지막 도구막대 아래에서 상태막대 이상까지의 이 구역으로 페이지 내용과 무관하다.
offsetHeight
IE, Opera는 offsetHeight = clientHeight + 스크롤 바 + 테두리라고 생각합니다.
NS, FF는 오프셋 하이라이트가 웹 콘텐츠의 실제 높이로 client Height보다 작을 수 있다고 주장했다.
scrollHeight
IE, Opera는 scroll Height가 웹 페이지 내용의 실제 높이로 client Height보다 작을 수 있다고 생각한다.
NS, FF는 scroll Height를 웹 페이지의 내용 높이로 생각하지만 최소값은client Height이다.
간단히 말하다
clientHeight는 브라우저를 통해 내용을 보는 이 영역의 높이입니다.
NS,FF는offsetHeight와scrollHeight가 모두 웹 콘텐츠의 높이라고 주장하지만 웹 콘텐츠의 높이가clientHeight보다 작을 때scrollHeight의 값은clientHeight이고 offsetHeight는clientHeight보다 작을 수 있다.
IE, Opera는offsetHeight가 가시 영역clientHeight 스크롤 막대에 테두리를 덧붙인다고 생각합니다.scrollHeight는 웹 페이지 내용의 실제 높이다.
같은 도리
clientWidth,offsetWidth,scrollWidth의 설명은 위와 같으며 높이를 너비로 바꾸면 된다.
설명
이상은 DTD HTML 4.01 Transitional 기반으로 한 것으로, DTD XHTML 1.0 Transitional 인 경우 의미가 달라집니다. XHTML에서 이 세 값은 모두 같은 값으로 내용의 실제 높이를 나타냅니다.새 버전의 브라우저는 대부분 페이지에 지정된 DOCTYPE에 따라 다른 해석기를 사용할 수 있습니다.테스트 파일을 다운로드하거나 탐색합니다.