1, effect and function description of imitation Sina Weibo picture text list up and down, intermittent roll up and down
2. Principle of realization First to set the div can only display 4 pictures so many of the pictures will be automatically hidden and then add an animated event to the picture so they can scroll up and down scrolling effect play is the contents of Li tags in the picture and text of each Li as a whole in the scrolling play in the div when the display came out in the last leave Div The time to hide in the whole animation effect set a time to complete the operation.
3. Operating Environment
4, all pictures of the compression package to create a new file after the package decompression into the folder picture of the compression package in the bottom of the page can be seen and download the download without modifying the folder name because itself has been written and HTML5 within the path is consistent
5, will create the HTML file to save when the encoding type (UTF-8 has a signature) so that some Chinese normal display, the save type (T) replaced (All Files (*.*)), the HTML5 and then put the picture folder in the same folder effect
<! DOCTYPE HTML ">
<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, "new song Body";}
. 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 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;
/* Let Div always show 4 units of Height * *
Interval = Interval | | 4000;
/* Control the time of each animation effect 4000 milliseconds is 4 seconds from the bottom of the picture disappeared to the 5th picture from the above show an animation of 2 seconds a total of 4 seconds of time * *
Return This.each (function () {
var $list = $ (this),
/* Get the cache for all list items * *
Items = [],
/* Not initialized/*
CurrentItem = limit,
Total = 0,
/* After initialization/*
Height = $list. Find (' > Li:first '). Height ();
/* List Limit li elements * *
$list. Find (' > Li '). each (function () {
/* Get Cache * *
Items.push (' <li> ' + $ (this). html () + ' </li> ');
/* Get all the list of the li inside the cache * *
});
Total = Items.length;
/* li*/always displayed in the cache
$list. Wrap (' <div class= "Spywrapper"/> "). Parent (). CSS ({height:height * limit});
/* Control Div When the picture disappears still keep the same height will not be changed because of the disappearance of div * *
$list. Find (' > Li '). Filter (': GT (' + (limit-1) + ') '). Remove ();
/* To obtain all LI elements in the implementation of the removal method by calling the traversal method.
function Spy () {
/* Start the second picture from the top insert effect * *
var $insert = $ (Items[currentitem]). CSS ({height:0,opacity:0,display: ' None '}). Prependto ($list);
/* Insert a new div, transparency and height of zero * *
$list. Find (' > Li:last '). Animate ({opacity:0}, 1000, function () {
/* The effect of inserting an animation through traversal time is 1 seconds * *
$insert. Animate ({height:height}, 1000). Animate ({opacity:1}, 1000);
* * Add the new first div's height * *
$ (this). Remove ();
* * What is the effect of this removal is the first time when we load the page will have a few only picture no attribute value of the Li Clear is the first animation after the end of the no attribute of Li to remove the property is not a high li*/no animation effect
});
currentitem++;
/* Forever in the first Li position display is the next li picture * *
if (CurrentItem >= total) {
* * If 4 pictures are greater than or equal to all the words greater than or equal to the whole picture
CurrentItem = 0;
/* then start from 0.
}
SetTimeout (Spy, Interval)
* * in the UL and 4 seconds to complete * *
}
Spy ();
/* Effect of the whole switch * *
});
};
}) (JQuery);
</script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (' Ul.spy '). Simplespy ();
/*ul.spy call Simplespy () template Method * *
});
</script>
<body>
<div class= "Demo" >
<div id= "sidebar" >
<ul class= "Spy" >
<li>
<a href= "http://www.jb51.net/" title= "View Round" ></a>
<p class= "Info" >nov 29th 2008 by Neue</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View reflet" ></a>
<p class= "Info" >nov 29th 2008 by Neue</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View Kate moross Little big Planet" ></a>
<p class= "Info" >nov 29th 2008 by Neue</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View Untitled" ></a>
<p class= "Info" >nov 29th 2008 by Mike1052</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View my Tutorial ' s Library" ></a>
<p class= "Info" >nov 29th 2008 by Francescoonair</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View sandy-your free personal email assistant-log in" ></a>
<p class= "Info" >nov 29th 2008 by John Doe</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View sandy-your free personal email assistant-log in" ></a>
<p class= "Info" >nov 29th 2008 by John Doe</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View sandy-your free personal email assistant" ></a>
<p class= "Info" >nov 29th 2008 by John Doe</p>
</li>
<li>
<a href= "http://www.jb51.net/" title= "View Values of N Blog" ></a>
<p class= "Info" >nov 29th 2008 by John Doe</p>
</li>
</ul>
</div>
</div>
</body>
How, the effect is quite good.
