Difference between Marquee Behavior and Marquee Loop
Marquee Behaviour :
Marquee behaviour is the value of an attribute to specifies how the text or link should be move in html.
They are three types on how to manage these values and examples:
- Alternate
- Slide
- Scroll
Alternate:
An Alternate behaviour text or link should be between sliding and scrolling. It will be move on both sides. one end to another end and move same to another end direction.
Slide:
The slide behaviour is used to text or line move one end to another end once. When the text or link reaches the other end the slide will be stopped.
Scroll:
The scroll behaviour method is used to scroll completely across and start again like news and scroll is the default method in the marquee.
<!DOCTYPE html>
<html>
<head>
<title>Marquee Behaviour</title>
<style>
.main {
width:960px;
text-align: center;
margin:0 auto;
}
.marquee {
color:#ffffff;
padding:20px 20px;
border-radius:5px;
}
h1
{
color:#072f5f;
text-align:center;
}
</style>
</head>
<body>
<h1 style="">Dailyaspirants.com</h1>
<div class="main">
<h2>Scroll</h2>
<marquee class="marquee"
bgcolor="#072f5f"
direction="left"
behavior=scroll
loop="">
Scroll
</marquee>
<h2>Alternate</h2>
<marquee class="marquee"
bgcolor="#58ddce"
behavior=alternate
direction="left"
loop="">
Alternate
</marquee>
<h2>Slide</h2>
<marquee class="marquee"
bgcolor="#3895d3"
behavior=slide
direction="left"
loop="">
Slide
</marquee>
</div>
</body>
</html>
Marquee loop:
Marquee loop is the value of an attribute that define the numbers of time should be a loop on the marquee.
The Marquee loop is the default value is infinite and when we mention the number the loop will be stopped in html.
<marquee loop="number"> /* default loop is infinite*/
<!DOCTYPE html>
<html>
<head>
<title>Marquee Loop</title>
<style>
.main {
width:960px;
text-align: center;
margin:0 auto;
}
.marquee {
color:#ffffff;
padding:90px 20px;
border-radius:5px;
}
h1
{
color:#072f5f;
text-align:center;
}
</style>
</head>
<body>
<h1 style="">Dailyaspirants.com</h1>
<div class="main">
<h2>Loop</h2>
<marquee class="marquee"
bgcolor="#3895d3"
direction="up"
loop="2">
Marquee Loop 1
</marquee>
<marquee class="marquee"
bgcolor="#3895d3"
direction="down"
loop="3">
Marquee Loop 2
</marquee>
</div>
</body>
</html>
