Little white JavaScript code analysis on merry slides

<! DOCTYPE HTML Public"-//W3C//DTD XHTML 1.0 transitional//en" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/><title> Untitled Document </title><styletype="Text/css"><!--#mydiv1 {height:30px;width:300px;}--></style>"Beginmarquee ()"><table width=" $"Border="0"cellspacing="0"cellpadding="0"&GT;&LT;TR&GT;&LT;TD width=" $"><div id="Demo"style="overflow:hidden;width:200px; height:100px"><div id="Demo1">"1.jpg"Width=" $"height=" $"/>"2.jpg"Width=" $"height=" $"/>"3.jpg"Width=" $"height=" $"/>"4.jpg"Width=" $"height=" $"/>"5.jpg"Width=" $"height=" $"/>"6.jpg"Width=" $"height=" $"/></div> <div id="Demo2"></div> </div></td><td>&nbsp;</td></tr></table><div id="Mydiv1"> Data Display </div><script language="JavaScript">var speed= Ademo2.innerhtml=Demo1.innerHTMLmydiv1.innerHTML='Demo's scrolltop'+demo.scrolltop+'Demo1 's scrolltop'+demo1.scrolltop+'Demo2 's scrolltop'+Demo2.scrolltopfunctionMarquee () {if(demo2.offsettop-demo.scrolltop<=0) Demo.scrolltop-=Demo1.offsetheightElse{demo.scrolltop++}mydiv1.innerhtml='Demo's scrolltop'+demo.scrolltop+'<br>demo1 's scrolltop'+demo1.scrolltop+'<br>demo2 's scrolltop'+demo2.scrolltop+'<br><br>demo's offsettop'+demo.offsettop+'<br>demo1 's offsettop'+demo1.offsettop+'<br>demo2 's offsettop'+demo2.offsettop+'<br><br>demo's offsetheight'+demo.offsetheight+'<br>demo1 's offsetheight'+demo1.offsetheight+'<br>demo2 's offsetheight'+Demo2.offsetheight}var MyMarfunctionBeginmarquee () {MyMar=setinterval (marquee,speed)}demo.onmouseover=function() {clearinterval (MyMar)}demo.onmouseout=function() {mymar=setinterval (marquee,speed)}</script> </script></body>
Demo ScrollTop change from 0 to 1200
Demo1 's ScrollTop0
Demo2 's ScrollTop0
Demo's OffsetTop0
Demo1 's OffsetTop0
Demo2 's offsetTop1200
Demo's offsetHeight100
Demo1 's offsetHeight1200
Demo2 's offsetHeight1200
ScrollTop is equivalent only to objects containing nested child elements, with overflow scroll bars, and is a property of the parent. Only the distance that the child object overflows the upper boundary of the parent object. (Do not understand from the ScrollBar, the parent object position is more accurate from the child object)
OffsetTop This is more difficult to understand, is the concept of sub-object, if the literal understanding refers to the obj distance above or the upper control position this is not particularly accurate, because in the slide scrolling process, in fact, the OFFSETTOP is not changed. The distance from the top of the whole to the object, rather than the initial. or the distance of the child object from the top of the overall sub-object space.
Offsetheight is the actual height.
demo.scrolltop++ and Overflow:hidden  make up the rolling
Little white JavaScript code analysis on merry slides