Javascript seamless scrolling 2

using less Code to achieve the same effect, we should write the Program ultimate goal, of course, readability cannot be lost. In the last run box of the first part, I have made such an exploration. However, if you do not change the value of the parameter, you can perform Article On scrolltop/scrollleft and offsettop/offsetleft. The general idea is to move an element to a certain direction, so that the content (image or text) in the element will move along. When the element moves to a certain distance, it will return to the origin. To prevent content from being moved, we need two identical sets of content. In the first part, the second set of content is dynamically generated and copied to another sibling element. In this case, we need to take some twists and turns to arrange all the content horizontally. I thought, would it be better to add the second set of content to the same element? At least a little less CSS is written. The use of scrolltop/scrollleft to implement scrolling has another drawback. It strictly specifies the width and height of the parent container. For example, we want to scroll up and down the image, UL is used as the container, and Li's image is the scrolling content, the height of UL is at least twice that of the image (we assume that the size of each image is equal). Otherwise, the image cannot be moved. With this in mind, I have developed a new generation of seamless rolling functions.

 # marquee, # marquee Li {padding: 0; margin: 0 ;}# marquee {position: relative; List-style: none; Height: 150px; width: 200px; overflow: hidden; Border: 10px solid #369 ;}# marquee Li {position: absolute ;} # marquee IMG {display: block; Border: 0 ;}

 var marquee = function (ID) {try1_document.exe ccommand ("backgroundimagecache", false, true );} catch (e) {}; var Container = document. getelementbyid (ID), slide = container. getelementsbytagname ("Li") [0], speed = arguments [1] | 10, Delta = 0, // The current rolling position critical = slide. offsetheight; // critical value slide. innerhtml + = slide. innerhtml; var rolling = function (){ Delta =-critical? Delta = 0: Delta --; slide. style. top = delta + "PX";} var timer = setinterval (rolling, speed) // sets the timer container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop rolling container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when you move the mouse away} window. onload = function () {marquee ("marquee") ;}

<Br/> <! Doctype HTML> <br/> <title> JavaScript seamless scrolling by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/> H1 {<br/> Font: 400 16px/1 "Microsoft yahei", kaiti_gb2312, simsun <br/>}< br /># Marquee, # marquee Li {<br/> padding: 0; <br/> margin: 0; <br/>}< br/> # marquee {<br/> position: relative; <br/> list-style: none; <br/> Height: 150px; <br/> width: 200px; <br/> overflow: hidden; <br/> border: 10px solid #369; <br/>}< br/> # marquee Li {<br/> position: absolute; <br/>}< br/> # marquee IMG {<br/> display: block; <br/> border: 0; <br/>}< br/> </style> <br/> <SCRIPT type = "text/plain crip T "> <br/> var marquee = function (ID) {<br/> try1_document.exe ccommand (" backgroundimagecache ", false, true);} catch (e ){}; <br/> var Container = document. getelementbyid (ID), <br/> slide = container. getelementsbytagname ("Li") [0], <br/> speed = arguments [1] | 10, <br/> Delta = 0, // current scroll position <br/> critical = slide. offsetheight; // critical point <br/> slide. innerhtml + = slide. innerhtml; <br/> var rolling = function (){ <Br/> Delta =-critical? Delta = 0: Delta --; <br/> slide. style. top = delta + "PX"; <br/>}< br/> var timer = setinterval (rolling, speed) // sets the timer <br/> container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop scrolling. <br/> container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when the mouse is removed <br/>}< br/> window. onload = function () {<br/> marquee ("marquee "); <br/>}< br/> </SCRIPT> <br/> <p> seamless JavaScript scrolling (up) by situ zhengmei </p> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <ul id = "marquee"> <br/> <li> <br /> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href =" http://www.cnblogs.com/rubylouvre/ "> </ a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> </LI> <br/> </ul> <br/>

Run code

It is easy to scroll down, but it is located between the first set of content and the second set of content, that is, slide. offsetheight, but we need to change it to a negative number to move down to the whole, and then move up slowly.

<Br/> <! Doctype HTML> <br/> <title> JavaScript seamless scrolling by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/> H1 {<br/> Font: 400 16px/1 "Microsoft yahei", kaiti_gb2312, simsun <br/>}< br /># Marquee, # marquee Li {<br/> padding: 0; <br/> margin: 0; <br/>}< br/> # marquee {<br/> position: relative; <br/> list-style: none; <br/> Height: 150px; <br/> width: 200px; <br/> overflow: hidden; <br/> border: 10px solid # b45b3e; <br/>}< br/> # marquee Li {<br/> position: absolute; <br/>}< br/> # marquee IMG {<br/> display: block; <br/> border: 0; <br/>}< br/> </style> <br/> <SCRIPT type = "text/PLAIN C Ript "> <br/> var marquee = function (ID) {<br/> try1_document.exe ccommand (" backgroundimagecache ", false, true);} catch (e ){}; <br/> var Container = document. getelementbyid (ID), <br/> slide = container. getelementsbytagname ("Li") [0], <br/> speed = arguments [1] | 10, <br/> critical = slide. offsetheight, // critical value <br/> Delta =-critical; <br/> slide. innerhtml + = slide. innerhtml; <br/> var rolling = function () {<Br/> Delta = 0? Delta =-critical: Delta ++; <br/> slide. style. top = delta + "PX"; <br/>}< br/> var timer = setinterval (rolling, speed) // sets the timer <br/> container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop scrolling. <br/> container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when the mouse is removed <br/>}< br/> window. onload = function () {<br/> marquee ("marquee "); <br/>}< br/> </SCRIPT> <br/> <p> seamless JavaScript scrolling (scroll down) by situ zhengmei </p> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <ul id = "marquee"> <br/> <li> <br /> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </ a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> </LI> <br/> </ul> <br/>

Run code

It is easier to achieve horizontal movement than the first part. The structural layer does not need to be changed at all, and the performance Layer does not have to be changed.

 
# Marquee, # marquee Li {padding: 0; margin: 0 ;}# marquee {position: relative; List-style: none; Height: 150px; width: 200px; overflow: hidden; Border: 10px solid # b45b3e;} # marquee Li {position: absolute; width: 1000% ;/*★★New★★*/} # Marquee A {float: Left ;/*★★New★★*/} # Marquee IMG {display: block; Border: 0 ;}
 

The difficulty is how to obtain the critical value, that is, the location between the first set of content and the second set of content. Since the second set of content does not have a coat element, we need to start with the scroll object. The scroll object is element A. We need to calculate the distance from the first element a in the second set to the left of the parent element. This value is the required critical value. Understanding this makes it easy.

 
// ************************ Slide. innerhtml + = slide. innerhtml; var item = slide. getelementsbytagname ("A"), critical = item [item. length/2]. offsetleft, // critical value *********
 

<Br/> <! Doctype HTML> <br/> <title> JavaScript seamless scrolling by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/> H1 {<br/> Font: 400 16px/1 "Microsoft yahei", kaiti_gb2312, simsun <br/>}< br /># Marquee, # marquee Li {<br/> padding: 0; <br/> margin: 0; <br/>}< br/> # marquee {<br/> position: relative; <br/> list-style: none; <br/> Height: 150px; <br/> width: 200px; <br/> overflow: hidden; <br/> border: 10px solid #8080c0; <br/>}< br/> # marquee Li {<br/> position: absolute; <br/> width: 1000%; /* New */<br/>}< br/> # marquee A {<br/> float: left; /* New */<br/>}< br/> # marquee IMG {<br/> displ Ay: block; <br/> border: 0; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var marquee = function (ID) {<br/> tryequaldocument.exe ccommand ("backgroundimagecache", false, true) ;}catch (e) {}; <br/> var Container = document. getelementbyid (ID), <br/> slide = container. getelementsbytagname ("Li") [0], <br/> speed = arguments [1] | 10; <br/> slide. innerhtml + = slide. innerhtml; <br/> var item = s Lide. getelementsbytagname ("A"), <br/> critical = item [item. length/2]. offsetleft, // critical value <br/> Delta = 0; <br/> var rolling = function () {<br/> Delta =-critical? Delta = 0: Delta --; <br/> slide. style. left = delta + "PX"; <br/>}< br/> var timer = setinterval (rolling, speed) // sets the timer <br/> container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop scrolling. <br/> container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when the mouse is removed <br/>}< br/> window. onload = function () {<br/> marquee ("marquee "); <br/>}< br/> </SCRIPT> <br/> <p> JavaScript seamless scrolling (left scrolling) by situ zhengmei </p> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <ul id = "marquee"> <br/> <li> <br /> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </ a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> </LI> <br/> </ul> <br/>

Run code

The following is a scroll to the right. Because there are less than 20 rows of scripts, you should understand the source code without going into details.

<Br/> <! Doctype HTML> <br/> <title> JavaScript seamless scrolling by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript seamless scrolling by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/> H1 {<br/> Font: 400 16px/1 "Microsoft yahei", kaiti_gb2312, simsun <br/>}< br /># Marquee, # marquee Li {<br/> padding: 0; <br/> margin: 0; <br/>}< br/> # marquee {<br/> position: relative; <br/> list-style: none; <br/> Height: 150px; <br/> width: 200px; <br/> overflow: hidden; <br/> border: 10px solid # 6cc; <br/>}< br/> # marquee Li {<br/> position: absolute; <br/> width: 1000%; <br/>}< br/> # marquee A {<br/> float: Left; <br/>}< br/> # marquee IMG {<br/> display: block; <br/> B Order: 0; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var marquee = function (ID) {<br/> tryequaldocument.exe ccommand ("backgroundimagecache", false, true) ;}catch (e) {}; <br/> var Container = document. getelementbyid (ID), <br/> slide = container. getelementsbytagname ("Li") [0], <br/> speed = arguments [1] | 10; <br/> slide. innerhtml + = slide. innerhtml; <br/> var item = slide. getelementsb Ytagname ("A"), // critical point <br/> critical = item [item. length/2]. offsetleft, <br/> Delta =-critical; <br/> var rolling = function () {<br/> Delta = 0? Delta =-critical: Delta ++; <br/> slide. style. left = delta + "PX"; <br/>}< br/> var timer = setinterval (rolling, speed) // sets the timer <br/> container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop scrolling. <br/> container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when the mouse is removed <br/>}< br/> window. onload = function () {<br/> marquee ("marquee "); <br/>}< br/> </SCRIPT> <br/> <p> JavaScript seamless scrolling (to the right) by situ zhengmei </p> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <ul id = "marquee"> <br/> <li> <br /> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </ a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> <a href = "http://www.cnblogs.com/rubylouvre/"> </a> <br/> </LI> <br/> </ul> <br/>

Run code

We can combine the above four functions into a function, and the structural layer and the presentation layer refer to the upward scrolling.

VaR marquee = function (ID) {try1_document.exe ccommand ("backgroundimagecache", false, true);} catch (e) {}; var Container = document. getelementbyid (ID), slide = container. getelementsbytagname ("Li") [0], Options = arguments [1] | |{}, speed = options. speed | 10, direction = options. direction | "Left"; slide. innerhtml + = slide. innerhtml; var item = slide. getelementsbytagname ("A"), critical, Delta, rolling, F Ield; If (Direction = "Left" | direction = "right") {slide.style.css text = "width: 1000%"; for (VAR I = 0, L = item. length; I <L; I ++) {itempolici}.style.css text = "float: Left" ;}field = "Left"; Critical = item [item. length/2]. offsetleft;} else if (Direction = "up" | direction = "down") {field = "TOP"; Critical = item [item. length/2]. offsettop;} If (Direction = "up" | direction = "Left") {Delta = 0; ROL Ling = function () {Delta =-critical? Delta = 0: Delta --; slide. style [field] = delta + "PX" ;}} else if (Direction = "down" | direction = "right") {Delta =-critical; rolling = function () {Delta = 0? Delta =-critical: Delta ++; slide. style [field] = delta + "PX" ;}} var timer = setinterval (rolling, speed) // sets the timer container. onmouseover = function () {clearinterval (timer)} // when you move the cursor over marquee, clear the timer and stop rolling container. onmouseout = function () {timer = setinterval (rolling, speed)} // reset the timer when you move the mouse away}

Usage:

 
Marquee ("marquee", {speed: 35, direction: "up "});
 

With this, it is easy to implement another image rotation. Let's make a notice first. This article ends.