Home > Developer > JavaScript
In front-end html code, the vertical and horizontal scrolling of text or images is achieved by using marquee. However, with the consideration of browser compatibility and w3c standards, later I thought it would be implemented using javascript code. Later, I liked jquery again. The content below will be helpful to beginners. Do not spray it, but I am very grateful for your guidance.
Principle: The principle of seamless rolling is to use two containers with the same content to achieve the visual effect of deceiving people. Then, the scroll bar of the entire large container can be moved up or down to implement scrolling. The following is a hand-drawn figure to briefly describe the principle. First, we aim to horizontally scroll the content in box 1 to the left (scroll to the right, the principle of up and down is actually roughly the same, as long as you know one of them, none of the above .). When loading the page, we use js to dynamically assign the content (html content) in box 2 to the same content as that in box 1. Then, move the scroll bar gradually to the Right to achieve the left effect. So much. The Code (with comments) will be attached ).
1.html code
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Effect of juqery on marquee </title>
<Script src = "jquery-1.4.2.js" type = "text/javascript"> </script>
<Style type = "text/css">
# Container/* This is the outermost container. The most important thing is to hide overflow: hidden. */
{
Width: 600px;
Height: 80px;
Overflow: hidden;
}
# Longwidth
{
Height: 80px;
Width: 1000%;/* to be large enough, you must be able to fit the div1 and div2 contents. Otherwise, the second line will appear because float: left cannot be mounted */
}
. Kuang
{
Float: left;
Height: 80px;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ("# Div2" ).html ($ ("# div1" ).html (); // set div2 html to div1 html
Var mar = function (){
If ($ ("# container"). scrollLeft ()> $ ("# div1"). width () {// when the hidden length of the scroll bar is greater than the width of div1
$ ("# Container"). scrollLeft (0 );
}
Else {
$ ("# Container"). scrollLeft ($ ("# container"). scrollLeft () + 5); // move 1px to the right of each scroll bar;
}
};
Var vid = setInterval (mar, 1 );
$ ("# Container"). mouseenter (function (){
ClearInterval (vid );
}). Mouseleave (function (){
Vid = setInterval (mar, 1 );
});
});
</Script>
</Head>
<Body>
<! -- The container can use div and ul li in the content, so box 1 is div1 and Box 2 is div2. If two divs are in one row, you need to set the float: left attribute of div -->
<! -- Of course, if you don't know much about css, you can use table to implement it, and use td1 and td2 to implement it. I don't like table, so I did it through div -->
<Div id = "container">
<Div id = "longwidth">
<Div id = "div1" class = "kuang">
</Div>
<Div id = "div2" class = "kuang"> </div>
</Div>
</Div>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
