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.
Core code
| The code is as follows |
Copy Code |
<script>
var t=setinterval (myfunc,1000)
var D=document.getelementbyid ("Div1")
function MyFunc () {
var o=d.firstchild
D.removechild (o)
D.appendchild (o)
}
D.onmouseover=function () {clearinterval (t)}
D.onmouseout=function () {T=setinterval (myfunc,1000)}
</script> |
The above shows four lines, if only 1 lines, or a few lines change here height:68px
Shows only 1 rows: <div id= "Div1 style=" Width:300px;height:15px;overflow: Hidden
Picture Scrolling
| The code is as follows |
Copy Code |
<style>img{display:block}</style>
<div id= "Div1" style= "Width:221px;height:187px;overflow:hidden" >
</div>
<script>
var t=setinterval (myfunc,1000)
var D=document.getelementbyid ("Div1")
function MyFunc () {
var o=d.firstchild
D.removechild (o)
D.appendchild (o)
}
D.onmouseover=function () {clearinterval (t)}
D.onmouseout=function () {T=setinterval (myfunc,1000)}
</script> |
Look at one more example.
| The code is as follows |
Copy Code |
Program code
<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> |
A mid-level, upper, lower, left and right scrolling code, JS seamless scrolling code, you can control the speed of scrolling, scrolling direction, and considering the obj.style.attr can only get to the inline style, so also added JS to determine the exact external patch to eliminate the non-inline style of the external patch on the impact of seamless convergence. JS through the internal elements of four times to maintain scrolling, so as long as the original content size of the container corresponding to the size of 1/4 can scroll, reducing the previous two times the rolling threshold of the elements.
The first parameter con_id is used for JS to find the element, and is the ID of the scrolling element.
The second parameter speed_num is used to set the scrolling speed, the larger the number, the slower the scrolling speed, the unit default is milliseconds, do not write, just write a positive integer.
The third parameter direct is used to control the direction of scrolling, top/bottom/left/right, if not these four values, horizontal scrolling defaults to the left, vertical scrolling by default upward. Note Some points:
1, the horizontal scrolling container ID given by the container can and only have a direct child node!
2, the use of the way is in the head of the page to introduce this file, in the need to scroll the container after the closure of the label call the corresponding rolling method scrollsp (Con_id,speed,direct), Scrollsz (Con_id,speed,direct).
| The code is as follows |
Copy Code |
| <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Scrolling Code </title>
<style>
*{margin:0; padding:0;}
ul,li{List-style:none;}
. top_1{height:100px; width:200px border:1px solid #333333; margin:0 auto;
. top_1 p{height:30px; line-height:30px; margin-top:10px;}
. left_1{width:500px; height:100px; margin:0 auto;
. Left_1 ul{}
. left_1 li{float:left; width:120px; height:100px; line-height:100px; text-align:center;
. left_1 p{width:50px;
100px; line-height:100px;}
. left_1_i div{width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px : 10px;}
</style>
<script language= "JavaScript" >
function Scrollsz (con_id,speed,direct) {
var Con,items,heighthalf,heightall;
var timer;
Speed = parseint (speed);//Get Set speed parameter
con = document.getElementById (con_id);
Con.style.overflow = "hidden";
if (direct = = "Top") {
Direct = "Top";
}else if (direct = "Bottom") {
Direct = "Bottom";
}else{
Direct = "Top";
}
Con.innerhtml +=con.innerhtml;
Con.innerhtml +=con.innerhtml;
Items = Getchildnodes (con);
if (Items.length < 1) {
Return
}
Heightall = 0;
for (Var i=0;i<items.length;i++) {
var Numtop,numbottom;
if (!! Window. ActiveXObject) {
Numtop = items[i].currentstyle["MarginTop"];
Numbottom = items[i].currentstyle["MarginBottom"];
}else{
Numtop = Document.defaultView.getComputedStyle (items[i],null) ["MarginTop"];
Numbottom = Document.defaultView.getComputedStyle (items[i],null) ["MarginBottom"];
}
Numtop = parseint (numtop);
Numbottom = parseint (Numbottom);
Numtop + = Numbottom;
if (Numtop >0) {
Heightall + = Numtop;
}
Heightall + = Items[i].offsetheight;
}
Heighthalf = HEIGHTALL/2;
if (direct = = "Bottom") {
Con.scrolltop = Heighthalf;
Timer = setinterval (_scrollbottom,speed);
}else if (direct = "Top") {
Timer = setinterval (_scrolltop,speed);
}
Con.onmouseover = function () {
if (timer) {
Clearinterval (timer);
timer = null;
}
};
Con.onmouseout = function () {
if (!timer) {
if (direct = = "Top") {
Timer = setinterval (_scrolltop,speed);
}else if (direct = "Bottom") {
Timer = setinterval (_scrollbottom,speed);
}
}
};
function _scrolltop () {
if (Con.scrolltop < heighthalf) {
Con.scrolltop + 2;
}else{
con.scrolltop = 0;
}
}
function _scrollbottom () {
if (Con.scrolltop > 0) {
Con.scrolltop-= 2;
}else{
Con.scrolltop = Heighthalf;
}
}
} function Scrollsp (con_id,speed,direct) {
var con,innercon,timer,items,widthall,widthhalf;
Speed = parseint (speed);
con = document.getElementById (con_id);
Con.style.overflow = "hidden";
Items = Getchildnodes (con);
if (items.length = = 1) {
Innercon = Items[0];
}else{
Return
}
innercon.innerhtml + = innercon.innerhtml;
innercon.innerhtml + = innercon.innerhtml;
Items = Getchildnodes (Innercon);
if (items.length<1) {
Return
}
Widthall = 0;
for (Var i=0;i<items.length;i++) {
}
for (Var i=0;i<items.length;i++) {
var numleft,numright;
if (!! Window. ActiveXObject) {
Items[i].style.stylefloat = "Left";
Numleft = items[i].currentstyle["MarginLeft"];
Numright = items[i].currentstyle["MarginRight"];
}else{
Items[i].style.cssfloat = "Left";
Numleft = Document.defaultView.getComputedStyle (items[i],null) ["MarginLeft"];
Numright = Document.defaultView.getComputedStyle (items[i],null) ["MarginRight"];
}
Numleft = parseint (numleft);
Numright = parseint (numright);
Numleft + = Numright;
if (numleft>0) {
Widthall + = Numleft;
}
Widthall + = Items[i].offsetwidth;
}
Widthhalf = WIDTHALL/2;
InnerCon.style.width = widthall+ "px";
if (direct = = "Left") {
Direct = "Left";
}else if (direct = "right") {
Direct = "Right";
}else{
Direct = "Left"
}
if (direct = = "Left") {
Timer = setinterval (_scrollleft,speed);
}else if (direct = "right") {
Con.scrollleft = Widthhalf;
Timer = setinterval (_scrollright,speed);
}
Con.onmouseover = function () {
if (timer) {
Clearinterval (timer);
timer = null;
}
}
Con.onmouseout = function () {
if (direct = = "Left") {
Timer = setinterval (_scrollleft,speed);
}else{
Timer = setinterval (_scrollright,speed);
}
}
function _scrollleft () {
if (con.scrollleft<widthhalf) {
Con.scrollleft + 2;
}else{
Con.scrollleft = 0;
}
}
function _scrollright () {
if (con.scrollleft>0) {
Con.scrollleft-= 2;
}else{
Con.scrollleft = Widthhalf;
}
}
}
function Getchildnodes (obj) {//Get element child nodes
var childlist,list;
Childlist = new Array ();
list = Obj.childnodes;
for (Var i=0;i<list.length;i++) {
if (List[i].nodetype = 1)
Childlist[childlist.length] = List[i];
}
return childlist;
}
</script>
<body>
<div id= "top_1" class= "Top_1" >
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>b</div>
<p>5</p>
<p>6</p>
<p>7</p>
<div>a</div>
</div>
<script language= "JavaScript" >scrollsz ("Top_1", "bottom");</script>
<div id= "left_1" class= "left_1" >
<div class= "Left_1_i" >
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>b</div>
<div>a</div>
</div>
</div>
<script language= "JavaScript" >SCROLLSP ("left_1", "right");</script>
</body>
|
