Seamless scrolling of Marquee Images

Seamless scrolling of Marquee Images

First, let's take a look at several attributes of the object:

Innerhtml: sets or retrieves HTML in the object's start and end tags.

Scrollheight: gets the scroll height of an object.

Scrollleft: sets or obtains the distance between the left-side border of the object and the leftmost end of the currently visible content in the window.

Scrolltop: sets or obtains the distance between the top of the object and the top of the visible content in the window.

Scrollwidth: gets the scroll width of an object.

Offsetheight: gets the height of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.

Offsetleft: obtains the left position of the object relative to the layout or the parent coordinate specified by the offsetparent attribute.

Offsettop: obtains the top position of an object relative to the layout or the parent coordinate specified by the offsettop attribute.

Offsetwidth: gets the width of an object relative to the layout or the parent coordinate specified by the parent coordinate offsetparent attribute.

-----------------------------------------------------------------------

Seamless image scroll up

<Style type = "text/CSS">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo IMG {
Border: 3px solid # f2f2f2;
Display: block;
}
-->
</Style>
Scroll up
<Div id = "Demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>

<SCRIPT>
<! --
VaR speed = 10; // The greater the number, the slower the speed.
VaR tab = Document. getelementbyid ("Demo ");
VaR tab1 = Document. getelementbyid ("demo1 ");
VaR tab2 = Document. getelementbyid ("demo2 ");
Tab2.innerhtml = tab1.innerhtml; // clone demo1 to demo2
Function marquee (){
If (tab2.offsettop-tab. scrolltop <= 0) // when you scroll to the junction of demo1 and demo2
Tab. scrolltop-= tab1.offsetheight // The demo jumps to the top of the page.
Else {
Tab. scrolltop ++
}
}
VaR mymar = setinterval (marquee, speed );
Tab. onmouseover = function () {clearinterval (mymar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {mymar = setinterval (marquee, speed)}; // reset the timer when you move the mouse away
-->
</SCRIPT>
 
------------------------------------------------------------

Seamless image scrolling down

<Style type = "text/CSS">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Height: 100px;
Text-align: center;
Float: left;
}
# Demo IMG {
Border: 3px solid # f2f2f2;
Display: block;
}
-->
</Style>
Scroll down
<Div id = "Demo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>

<SCRIPT>
<! --
VaR speed = 10; // The greater the number, the slower the speed.
VaR tab = Document. getelementbyid ("Demo ");
VaR tab1 = Document. getelementbyid ("demo1 ");
VaR tab2 = Document. getelementbyid ("demo2 ");
Tab2.innerhtml = tab1.innerhtml; // clone demo1 to demo2
Tab. scrolltop = tab. scrollheight
Function marquee (){
If (tab1.offsettop-tab. scrolltop> = 0) // when you scroll to the junction of demo1 and demo2
Tab. scrolltop + = tab2.offsetheight // The demo jumps to the top of the page.
Else {
Tab. scrolltop --
}
}
VaR mymar = setinterval (marquee, speed );
Tab. onmouseover = function () {clearinterval (mymar)}; // clear the timer when you move the cursor up to stop scrolling.
Tab. onmouseout = function () {mymar = setinterval (marquee, speed)}; // reset the timer when you move the mouse away
-->
</SCRIPT>
 
--------------------------------------------------------
 
Seamless image scrolling to the left

<Style type = "text/CSS">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo IMG {
Border: 3px solid # f2f2f2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll left
<Div id = "Demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>

<SCRIPT>
<! --
VaR speed = 10; // The greater the number, the slower the speed.
VaR tab = Document. getelementbyid ("Demo ");
VaR tab1 = Document. getelementbyid ("demo1 ");
VaR tab2 = Document. getelementbyid ("demo2 ");
Tab2.innerhtml = tab1.innerhtml;
Function marquee (){
If (tab2.offsetwidth-tab. scrollleft <= 0)
Tab. scrollleft-= tab1.offsetwidth
Else {
Tab. scrollleft ++;
}
}
VaR mymar = setinterval (marquee, speed );
Tab. onmouseover = function () {clearinterval (mymar )};
Tab. onmouseout = function () {mymar = setinterval (marquee, speed )};
-->
</SCRIPT>
 
------------------------------------------------------

Seamless scrolling to the right

<Style type = "text/CSS">
<! --
# Demo {
Background: # FFF;
Overflow: hidden;
Border: 1px dashed # CCC;
Width: 500px;
}
# Demo IMG {
Border: 3px solid # f2f2f2;
}
# Indemo {
Float: left;
Width: 800%;
}
# Demo1 {
Float: left;
}
# Demo2 {
Float: left;
}
-->
</Style>
Scroll to the right
<Div id = "Demo">
<Div id = "indemo">
<Div id = "demo1">
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
<A href = "#"> </a>
</Div>
<Div id = "demo2"> </div>
</Div>
</Div>

<SCRIPT>
<! --
VaR speed = 10; // The greater the number, the slower the speed.
VaR tab = Document. getelementbyid ("Demo ");
VaR tab1 = Document. getelementbyid ("demo1 ");
VaR tab2 = Document. getelementbyid ("demo2 ");
Tab2.innerhtml = tab1.innerhtml;
Function marquee (){
If (Tab. scrollleft <= 0)
Tab. scrollleft + = tab2.offsetwidth
Else {
Tab. scrollleft --;
}
}
VaR mymar = setinterval (marquee, speed );
Tab. onmouseover = function () {clearinterval (mymar )};
Tab. onmouseout = function () {mymar = setinterval (marquee, speed )};
-->
</SCRIPT>

**************************************** **************