Home > Developer > JavaScript
It is perfectly compatible with jQuery, similar to Sina text fade-in and fade-out Effects of Various browsers, and jquery fade-in and fade-out
1. Effects and functions
2. Implementation principle first, we need to set that only four images can be displayed in the div. So many images will be automatically hidden, and then an animation event will be added to the image so that they can be played in a scrolling manner. effect playback is the content in the li tab. The image and text regard each li as a whole. During the scrolling playback, the content is displayed in the div and hidden in the animation effect when the div is finally left. set a time to complete the operation.
3. Runtime Environment
IE6 IE7 IE8 and above can be implemented in Firefox and Google Chrome Explorer
4. Create a new file for the compressed packages of all images and decompress the package into the compressed package of the folder image. You can see at the bottom of the page and download the package without modifying the folder name because it has already been written and the paths in html5 are consistent.
5. Replace the encoding type (the UTF-8 has a signature) when saving the html file, so that some Chinese can be displayed normally, will save the type (T) replace with (all files (*. *). Place the html5 and decompressed image folders in the same folder.
6. Code
Copy codeThe Code is as follows:
<! Doctype html ">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Style type = "text/css" media = "screen">
* {Margin: 0; padding: 0; list-style-type: none ;}
A, img {border: 0 ;}
Body {font: 12px/180% Arial, Helvetica, sans-serif, "";}
. Demo {width: 500px; margin: 30px auto 0 auto ;}
. Demo h2 {font-size: 16px; color: #333; height: 52px; line-height: 24px ;}
/* Sidebar */
# Sidebar {color: # AFB0B1; background: # 0D171A; float: left; margin: 0 0 24px; padding: 15px 10px; width: 300px ;}
# Sidebar li {height: 90px; overflow: hidden ;}
# Sidebar li h5 {color: # A5A9AB; font-size: 1em; margin-bottom: 0.5em ;}
# Sidebar li h5 a {color: # fff; text-decoration: none ;}
# Sidebar li img {float: left; border: solid 3px # fff; margin-right: 8px; display: inline ;}
# Sidebar li. info {color: # B1B1B1; font-size: 1em ;}
# Sidebar. spyWrapper {height: 100%; overflow: hidden; position: relative ;}
</Style>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js"> </script>
<Script type = "text/javascript">
(Function ($ ){
$. Fn. simpleSpy = function (limit, interval ){
Limit = limit | 4;
/* Make div always display the height of 4 units */
Interval = integer | 4000;
/* The time for controlling the animation effect is 4000 milliseconds, that is, the time for the animation to disappear from the bottom image to the top of the 5th images is displayed as a 2-second animation for a total of 4 seconds */
Return this. each (function (){
Var $ list = $ (this ),
/* Obtain the cache of all list items */
Items = [],
/* Uninitialized */
CurrentItem = limit,
Total = 0,
/* After initialization */
Height = $ list. find ('> li: first'). height ();
/* List limits the li element */
$ List. find ('> li'). each (function (){
/* Obtain the cache */
Items. push ('<li>' + response (this).html () + '</li> ');
/* Obtain the cache in li of all lists */
});
Total = items. length;
/* Always display the li in the cache */
$ List. wrap ('<div class = "spyWrapper"/> 'salary .parent().css ({height: height * limit });
/* Control the div to keep the same height when the image disappears. It will not change because the div disappears */
$ List. find ('> li'). filter (': gt (' + (limit-1) + '). remove ();
/* Obtain the method for removing all li elements by calling the Traversal method */
Function spy (){
/* Start to insert the second image from the top */
Var $ insert = values (items1_currentitemplate.css ({height: 0, opacity: 0, display: 'none'}). prependTo ($ list );
/* Insert a new div with zero transparency and height */
$ List. find ('> li: last'). animate ({opacity: 0}, 1000, function (){
/* Insert an animation through traversal for 1 second */
$ Insert. animate ({height: height}, 1000). animate ({opacity: 1}, 1000 );
/* Add the height of the first div */
$ (This). remove ();
/* What is the effect of this removal? When we load the page for the first time, there will be several li cleanups with no attribute values for the image, that is, after the first animation ends, there will be no attribute. li deletes a li that has no attributes and does not have a high animation effect */
});
CurrentItem ++;
/* Always display the next li image at the first li position */
If (currentItem> = total ){
/* If four images are greater than or equal to all images greater than or equal to the entire image */
CurrentItem = 0;
/* Start from 0 */
}
SetTimeout (spy, interval)
/* Completed in ul and 4 seconds */
}
Spy ();
/* The entire switch of the effect */
});
};
}) (JQuery );
</Script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ('Ul. spy'). simpleSpy ();
/* Ul. spy calls simpleSpy () Template Method */
});
</Script>
</Head>
<Body>
<Div class = "demo">
<H2> jquery imitation Sina Weibo image text list gap scroll fade in and out scroll <Div id = "sidebar">
<Ul class = "spy">
<Li>
<A href = "http://www.bkjia.com/" title = "View round"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View round"> round </a> <P class = "info"> Nov 29th 2008 by neue </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View reflet"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View reflet"> reflet </a> <P class = "info"> Nov 29th 2008 by neue </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Kate Moross Little Big Planet"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Kate Moross Little Big Planet"> Kate Moross Little Big Planet </a> <P class = "info"> Nov 29th 2008 by neue </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Untitled"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Untitled"> Untitled </a> <P class = "info"> Nov 29th 2008 by mike1052 </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View My Tutorial's Library"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View My Tutorial's Library"> My Tutorial's Library </a> <P class = "info"> Nov 29th 2008 by FrancescoOnAir </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant-Log in"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant-Log in"> Sandy-your free </a> <P class = "info"> Nov 29th 2008 by John Doe </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant-Log in"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant-Log in"> Sandy-your free </a> <P class = "info"> Nov 29th 2008 by John Doe </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Sandy-your free personal email assistant"> Sandy-your free </a> <P class = "info"> Nov 29th 2008 by John Doe </p>
</Li>
<Li>
<A href = "http://www.bkjia.com/" title = "View Values of n Blog"> </a>
<H5> <a href = "http://www.bkjia.com/" title = "View Values of n Blog"> Values of n Blog </a> <P class = "info"> Nov 29th 2008 by John Doe </p>
</Li>
</Ul>
</Div>
</Div>
</Body>
</Html>
How about it? The effect is quite good.
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
