This article introduced the jquery animation effect realization Picture Seamless continuous scrolling detailed code, shares for everybody reference, the concrete content as follows
The effect chart is as follows:
One, HTML code
<body>
<div id= "container" >
<ul id= "Content" >
<li><a href= "#" ></a></li>
<li><a href= "#" >< /a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li> <li><a href=
"#" > </a></li> <li><a href= "></a></li>
<li><a href=" # "></a></li >
</ul>
</div>
1. The div with ID container is the outermost wrapper used to control where the scrolling area is displayed.
2. The UL with ID content is used to wrap the pictures that need to be scrolled.
3. The Li element is used to wrap specific pictures.
Second, CSS code
*{margin:0; padding:0;}
img{
border:0;
}
#container {
width:800px;
height:130px;
<span style= "White-space:pre" > </span>margin:100px Auto;
BORDER:3PX solid blue;
Overflow:hidden;
position:relative;
}
#container ul{
List-style:none;
width:10000px;
Position:absolute;
}
#container ul li{
float:left;
margin-right:20px;
}
Here explains a little, the UL width why set to 10000px. Because the seamless continuous scrolling implementation principle, is in the existing display picture on the basis of cloning a copy, and stitching in the display of the picture behind, but because the total width of the display picture is unknown, so for security, it is best to set the width of the UL more large.
Three, seamless continuous rolling principle analysis
Four, jquery implementation code
<script type= "Text/javascript" >/* window.onload is more later loaded than $ (function () {}).
So the calculation of those widths can be accurately calculated in Chrome/window.onload = function () {/* Calculate the width of a segment/var segmentwidth = 0;
$ ("#container #content li"). each (the function () {segmentwidth+= $ (this). Outerwidth (True);
});
$ ("#container #content li"). Clone (). Appendto ($ ("#container #content"));
Run (6000);
function run (interval) {$ ("#container #content"). Animate ({"Left":-segmentwidth}, Interval, "linear", function () {
$ ("#container #content"). CSS ("left", 0);
Run (6000);
});
$ ("#container"). MouseEnter (function () {$ (#container #content). Stop ();
}. MouseLeave (function () {var passedcourse =-parseint ($ ("#container #content"). CSS ("left");
var time = 6000 * (1-passedcourse/segmentwidth);
Run (time);
});
}; </script>
1. Each of the LI elements is traversed by each to calculate the sum of their widths.
2. Copy a picture to the back of the existing picture, the schematic diagram of "figure I" shows.
3. Set 6 seconds to scroll through the existing image above the interface, after scrolling, by setting the content of the left value, the overall pull back to the initial state, the principle of the analysis diagram "Figure II" shown. Then recursively calls the Run method to complete the infinite scrolling.
4. When the mouse through the rolling area, the animation immediately stop; When the mouse leaves, the animation continues to execute.
The code for continuing the animation, as shown in the following illustration:
The above is the jquery realizes the picture seamless continuous scrolling code, hoped that has the help to everybody's study.
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
