<!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{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;
interval = interval || 4000;
return
this.each(
function
(){
var
$list
= $(this),
items = [],
currentItem = limit,
total = 0,
height =
$list
.find('> li:first').height();
$list
.find('> li').each(
function
(){
items.push('<li>' + $(this).html() + '</li>');
});
total = items.length;
$list
.wrap('<p
class
=
"spyWrapper"
/>').parent().css({height : height * limit});
$list
.find('> li').filter(':gt(' + (limit - 1) + ')').remove();
function
spy(){
var
$insert
= $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo(
$list
);
$list
.find('> li:last').animate({ opacity : 0}, 1000,
function
(){
$insert
.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);
$(this).remove();
});
currentItem++;
if
(currentItem >= total){
currentItem = 0;
}
setTimeout(spy, interval)
}
spy();
});
};
})(jQuery);
</script>
<script type=
"text/javascript"
>
$(document).ready(
function
(){
$('ul.spy').simpleSpy();
});
</script>
</head>
<body>
<p
class
=
"demo"
>
<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
<p id=
"sidebar"
>
<ul
class
=
"spy"
>
<li>
<a href=
"http://www.jb51.net/"
title=
"View round"
><img width=
"70"
height=
"70"
src=
"images/1.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View round"
>
round
</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by neue</p>
</li>
<li>
<a href=
"http://www.jb51.net/"
title=
"View reflet"
><img width=
"70"
height=
"70"
src=
"images/2.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View reflet"
>reflet</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by neue</p>
</li>
<li>
<a href=
"http://www.jb51.net/"
title=
"View Kate Moross Little Big Planet"
><img width=
"70"
height=
"70"
src=
"images/3.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Kate Moross Little Big Planet"
>Kate Moross Little Big Planet</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by neue</p>
</li>
<li>
<a href=
"http://www.jb51.net/"
title=
"View Untitled"
><img width=
"70"
height=
"70"
src=
"images/4.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Untitled"
>Untitled</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by mike1052</p>
</li>
<li>
<a href=
"http://www.jb51.net/"
title=
"View My Tutorial's Library"
><img width=
"70"
height=
"70"
src=
"images/5.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View My Tutorial's Library"
>My Tutorial's Library</a></h5>
<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"
><img width=
"70"
height=
"70"
src=
"images/6.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Sandy — your free personal email assistant - Log in"
>Sandy — your free</a></h5>
<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"
><img width=
"70"
height=
"70"
src=
"images/7.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Sandy — your free personal email assistant - Log in"
>Sandy — your free</a></h5>
<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"
><img width=
"70"
height=
"70"
src=
"images/8.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Sandy — your free personal email assistant"
>Sandy — your free</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by John Doe</p>
</li>
<li>
<a href=
"http://www.jb51.net/"
title=
"View Values of n Blog"
><img width=
"70"
height=
"70"
src=
"images/9.png"
title=
""
/></a>
<h5><a href=
"http://www.jb51.net/"
title=
"View Values of n Blog"
>Values of n Blog</a></h5>
<p
class
=
"info"
>Nov 29th 2008 by John Doe</p>
</li>
</ul>
</p>
</p>
</body>
</html>