Seamless scrolling animation based on javascript 1
- 2021-08-06 20:05:41
- OfStack
Seamless rolling seems to be the biggest carrier of Internet advertising, which can be described as "ubiquitous". However, compared with the early flash fonts and floating advertisements, it is an improvement. Because of the huge demand, the front desk will encounter it sooner or later. I give the structure layer first, and then explain its implementation principle slowly.
<dl id="marquee">
<dt>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt=" Seamless rolling "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt=" Seamless rolling "/>
</dt>
<dd></dd>
</dl>I think this structure is much better than those pure DIV structures on the Internet, and at least it can save a lot of id and class. I don't know that fool first put forward the statement "DIV+CSS". The correct statement should be "xhtml+CSS". In other words, in the macro layout, block elements are used instead of table. Because DIV has fewer default styles, it is commonly used, while table regresses and focuses on data display. In microscopic formatting, CSS is used to replace the original labels such as b, big, center, i, s, small, strike and tt, which are only used for style setting. Obviously, CSS is more powerful than them.
The realization principle is similar to that of pure CSS photo album clicking anchor point to switch corresponding pictures, all of which use scrollTop. The procedure is as follows, because we set overflow of dl to hidden, the scroll bar to the left of dl is not visible. When we keep increasing its scrollTop, its content keeps moving up, reaching the visual area of dl, and squeezing out the original visible content above. The effect is a bit like setting margin-top with dl to negative. Continue to add scrollTop until we see the dd element. At this time, we want to look at the dt element, which was originally an empty element, and cloned the picture of dd element, in fact, it is for the effect of a shade method. When the dt element is completely squeezed out of the visual area of dl by the dd element, we are surprised to find that the visual area of dl element looks like its original style. This is also what the dd element does to copy the picture of the dt element. But if you keep going, you will definitely find out, because there are no elements under the dd element, and there are no pictures for us to show. Therefore, at this moment, we return the element scrollTop of dl to its original shape and return to the display of dt element picture.
So the question is, how can we be sure at this moment? The key point is this sentence "dt element is completely squeezed out of the visual area of dl by dd element". We can take offsetHeight of dt element, which is the height of dt element plus padding and border, or offsetTop of dd, which is the distance from the top of dd element to the top of dl element. Considering the quirk pattern of IE, I decided to use offsetTop first. Since we want to use offsetTop, we need to specify offsetParent. However, many tutorials forget to set position: relative for the dl element. Because in IE6, offsetParent is directly the parent element of the element, while IE7, IE8 and standard browser are the nearest fixed parent elements, and if not, body elements.
#marquee {
position:relative;
height:300px;
width:200px;
overflow:hidden;
border:10px solid #369;
}
#marquee img {
display:block;
}
#marquee dd {
margin:0px;
padding:0px;
}
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
var rolling = function(){
if(container.scrollTop == clone.offsetTop){
container.scrollTop = 0;
}else{
container.scrollTop++;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
window.onload = function(){
Marquee("marquee");
}
<!doctype html>
<title>javascript Seamless rolling by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Seamless rolling by Situ Masami " />
<meta name="description" content="javascript Seamless rolling by Situ Masami " />
<style type="text/css">
h1 {
font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
}
#marquee {
position:relative;
height:300px;
width:200px;
overflow:hidden;
border:10px solid #369;
}
#marquee img {
display:block;
}
#marquee dd {
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
var rolling = function(){
if(container.scrollTop == clone.offsetTop){
container.scrollTop = 0;
}else{
container.scrollTop++;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
window.onload = function(){
Marquee("marquee");
}
</script>
<h1>javascript Seamless rolling ( Scroll up ) by Situ Masami </h1>
<dl id="marquee">
<dt>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript Seamless rolling by Situ Masami "/>
</dt>
<dd></dd>
</dl>The above example is scrolling up, scrolling down is just 1. Start by setting scrollTop of dl element to offsetTop of dd element, and then decrement it!
<!doctype html>
<title>javascript Seamless rolling by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Seamless rolling by Situ Masami " />
<meta name="description" content="javascript Seamless rolling by Situ Masami " />
<style type="text/css">
h1 {
font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
}
#marquee {
height:300px;
width:200px;
overflow:hidden;
position:relative;
border:10px solid #F2F1D7;
}
#marquee img {
display:block;
}
#marquee dd {
margin:0px;
padding:0px;
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
container.scrollTop = clone.offsetTop;
var rolling = function(){
if(container.scrollTop == 0){
container.scrollTop = clone.offsetTop;
}else{
container.scrollTop--;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
window.onload = function(){
Marquee("marquee");
}
</script>
<h1>javascript Seamless rolling ( Scroll down ) by Situ Masami </h1>
<dl id="marquee">
<dt>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s017.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s018.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s019.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s020.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s021.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s022.jpg" alt="javascript Seamless rolling by Situ Masami "/>
<img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s023.jpg" alt="javascript Seamless rolling by Situ Masami "/>
</dt>
<dd></dd>
</dl>As for scrolling to the left, it is relatively troublesome. First we have to arrange the images horizontally, including those inside the dt element, and later cloned into the dd element, which requires floating. But this is not done yet, and we have to arrange the dt element horizontally with the dd element, so we have to set the float on the dl element. At the same time, we have to set a large value for the width of dl element, so that it does not wrap lines and can arrange all pictures by one word. I set it to 1000%, which is 10 times the width of the browser. For the picture, when it floats, there is a gap between the left and right, and the common method of setting margin and padding to 0 cannot remove them. We have to go to extremes and let them coat with an a element. Anyway, in reality, when we click on the picture, it will jump to another page or another place on the page, which is done with a element. Since the a element is an inline element, there is no box element, which will shrink inward and devour the gap outside the picture. Finally, there is no reason to display all the pictures at once, so we put an div over the dl element, and set key styles such as overflow, position and width there.
<div id="marquee">
<dl>
<dt>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s017.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s018.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s019.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s020.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s021.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s022.jpg" alt=" Seamless rolling "</a>
<a href="http://www.cnblogs.com/rubylouvre/" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="o_s023.jpg" alt=" Seamless rolling "</a>
</dt>
<dd></dd>
</dl>
</div>
#marquee {
position:relative;
width: 400px;
overflow:hidden;
border: 10px solid #B45B3E;
}
#marquee img {
border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
float:left;
margin:0;
padding:0;
}
#marquee dl{
width:1000%;
height:150px;
}javascript has not changed much, except that offsetTop is replaced by offsetLeft and scrollTop is replaced by scrollLeft. Therefore, familiarity with CSS is really beneficial.
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
var rolling = function(){
if(container.scrollLeft == clone.offsetLeft){
container.scrollLeft = 0;
}else{
container.scrollLeft++;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
<!doctype html>
<title>javascript Seamless rolling by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Seamless rolling by Situ Masami " />
<meta name="description" content="javascript Seamless rolling by Situ Masami " />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
h1 {
font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
}
#marquee {
position:relative;
width: 400px;
overflow:hidden;
border: 10px solid #B45B3E;
}
#marquee img {
border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
float:left;
margin:0;
padding:0;
}
#marquee dl{
width:1000%;
height:150px;
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
var rolling = function(){
if(container.scrollLeft == clone.offsetLeft){
container.scrollLeft = 0;
}else{
container.scrollLeft++;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
window.onload = function(){
Marquee("marquee");
}
</script>
<h1>javascript Seamless rolling ( Scroll to the left ) by Situ Masami </h1>
<div id="marquee">
<dl>
<dt>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
</dt>
<dd></dd>
</dl>
</div>
It's not difficult to scroll to the right, just draw a gourd according to the ladle!
<!doctype html>
<title>javascript Seamless rolling by Situ Masami </title>
<meta charset="utf-8"/>
<meta name="keywords" content="javascript Seamless rolling by Situ Masami " />
<meta name="description" content="javascript Seamless rolling by Situ Masami " />
<base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/">
<style type="text/css">
h1 {
font:400 16px/1 "Microsoft YaHei",KaiTi_GB2312,SimSun
}
#marquee {
position:relative;
width: 400px;
overflow:hidden;
border: 10px solid #8080C0;
}
#marquee img {
border:0px;
}
#marquee dl, #marquee dt,#marquee dd,#marquee a {
float:left;
margin:0;
padding:0;
}
#marquee dl{
width:1000%;
height:150px;
}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true);}catch(e){};
var container = document.getElementById(id),
original = container.getElementsByTagName("dt")[0],
clone = container.getElementsByTagName("dd")[0],
speed = arguments[1] || 10;
clone.innerHTML=original.innerHTML;
container.scrollLeft = clone.offsetLeft
var rolling = function(){
if(container.scrollLeft == 0){
container.scrollLeft = clone.offsetLeft;
}else{
container.scrollLeft--;
}
}
var timer = setInterval(rolling,speed)// Set the timer
container.onmouseover=function() {clearInterval(timer)}// Move the mouse to marquee Clear the timer and stop scrolling
container.onmouseout=function() {timer=setInterval(rolling,speed)}// Reset the timer when the mouse moves away
}
window.onload = function(){
Marquee("marquee");
}
</script>
<h1>javascript Seamless rolling ( Scroll to the right ) by Situ Masami </h1>
<div id="marquee">
<dl>
<dt>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s017.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s018.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s019.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s020.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s021.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s022.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
<a href="http://www.cnblogs.com/rubylouvre/"><img src="o_s023.jpg" alt="javascript Seamless rolling by Situ Masami "/></a>
</dt>
<dd></dd>
</dl>
</div>Another scroll text, feeling this thing and tab1, the biggest advantage is in a limited space to display a large amount of information.
#marquee {
position:relative;
height:300px;
width:200px;
overflow:hidden;
border:10px solid #369;
}
#marquee img {
display:block;
}
#marquee dd {
margin:0px;
padding:0px;
}