Picture Seamless scrolling code (left/down/up) _javascript tips

Presumably we all notice that the <marquee> does not cycle scrolling, so there are a lot of alternative scripts, or iframe or JS output <marquee>, regardless of how to do, are slightly troublesome. Here's a relatively simple way to realize this: a container demo that sets the width and hides content that extends beyond its width, where demo1 and demo2,demo1 are scrolling content, Demo2 for Demo1 direct cloning, By constantly changing the demo1 of the scrolltop or scrollleft to achieve the purpose of scrolling, when scrolling to the junction of Demo1 and Demo2 directly back to the original position, because Demo1 and demo2 like, so can not beat the moment, so as to achieve "seamless" rolling purposes.

On the basis of the original author made a certain change, mainly in the style above, the table to replace the label. and standardize JavaScript to run in all browsers.

Take a look at several properties of the object: InnerHTML: Sets or gets the HTML scrollheight that is inside the start and end tags of an object: Gets the scrolling height of the object.

ScrollLeft: Sets or gets the left distance between the left edge of an object and the current visible content in the window scrolltop: Sets or gets the distance between the top of the object and the top of the visible content in the window scrollwidth: getting the scrolling width of an object Offsetheight: Gets the height of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property offsetleft: Gets the left position of the object relative to the layout or the parent coordinates specified by the offsetparent property offsettop: Gets the calculated top position of the object relative to the layout or the parent coordinates specified by the offsettop property offsetwidth: Gets the width of the object relative to the layout or the parent coordinates specified by the parent coordinate offsetparent property

Copy Code code as follows:

Seamless scrolling on a picture
<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 larger 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 for Demo2
function Marquee () {
if (tab2.offsettop-tab.scrolltop<=0)//when scrolling to the junction of Demo1 and Demo2
Tab.scrolltop-=tab1.offsetheight//demo jump to the top
else{
tab.scrolltop++
}
}
var mymar=setinterval (marquee,speed);
Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll
Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved
-->
</script>
Seamless scrolling under picture
<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 larger 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 for Demo2
Tab.scrolltop=tab.scrollheight
function Marquee () {
if (tab1.offsettop-tab.scrolltop>=0)//when scrolling to the junction of Demo1 and Demo2
Tab.scrolltop+=tab2.offsetheight//demo jump to the top
else{
tab.scrolltop--
}
}
var mymar=setinterval (marquee,speed);
Tab.onmouseover=function () {clearinterval (MyMar)};//to clear the timer when the mouse moves up to stop the scroll
Tab.onmouseout=function () {mymar=setinterval (marquee,speed)};//Reset timer when mouse is moved
-->
</script>
Picture left Seamless scrolling
<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 larger 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>
Picture Right Seamless scrolling
<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 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 larger 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>