Originally in the front-end HTML code, the implementation of the horizontal vertical scrolling text or pictures, are used marquee, but with the consideration of browser compatibility and compliance with the standards of the international standard, then think of it or use JavaScript code to implement. Later, I like the jquery, the content of the following write hope for beginners Some help, master not to spray, but welcome guidance, grateful.
principle: The principle of seamless rolling is to use two containers of the same content to achieve the visual effect of deception. The scroll is then implemented through the movement of the entire large container scroll bar around or up or down. Here is a hand-drawn map to briefly explain the principle. First of all, our goal is to implement box 1 in the horizontal scroll to the left (scroll to the right, scroll up and down the principle is basically the same, as long as you know one of the other is not a problem. ）。 Then we load the page with JS dynamic in box 2 content (HTML content) assigned to the same as box 1 content. Then with the scroll bar gradually to the right to move, to achieve the left effect. Said so much. Please attach the code (with a note).
1.html Code
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
The effect of <title>juqery to realize marquee </title>
<script src= "Jquery-1.4.2.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
#container/* This is the outermost container, the key point is to hide the Overflow:hidden. */
{
width:600px;
height:80px;
Overflow:hidden;
}
#longwidth
{
height:80px;
width:1000%; * To be large enough, need to be able to div1 and DIV2 content can be installed, or because the float:left can not fit, will go to the second line * *
}
. 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 scroll bar is hidden longer 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>
<body>
<!--containers can use the Div, the content of the use of UL Li, then box 1 is div1, Box 2 is div2, need two div on one line, you need to set the Float:left properties of Div-->
<!--of course, if you are not familiar with CSS, you can use table to achieve, with TD1 and TD2. I have a kind of not pleased with the table, so through the div to do-->
<div id= "Container" >
<div id= "Longwidth" >
<div id= "Div1" class= "Kuang" >
</div>
<div id= "Div2" class= "Kuang" ></div>
</div>
</div>
</body>
