js特效

代码结构

1. 引入JS

<script type="text/javascript" src="../Spy_Effect/js/jquery-1.4.2.min.js"></script>

2. HTML代码

<div class="demo">
	<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>
	<div id="sidebar">
		<ul class="spy">
			<li>
				<a href="http://www.51qianduan.com/" title="View round"><img width="70" height="70" src="../Spy_Effect/images/1.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View round">round</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View reflet"><img width="70" height="70" src="../Spy_Effect/images/2.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View reflet">reflet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="../Spy_Effect/images/3.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" 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.51qianduan.com/" title="View Untitled"><img width="70" height="70" src="../Spy_Effect/images/4.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View Untitled">Untitled</a></h5>
				<p class="info">Nov 29th 2008 by mike1052</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View My Tutorial's Library"><img width="70" height="70" src="../Spy_Effect/images/5.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" 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.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="../Spy_Effect/images/6.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant - Log in"><img width="70" height="70" src="../Spy_Effect/images/7.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant - Log in">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant"><img width="70" height="70" src="../Spy_Effect/images/8.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View Sandy &mdash; your free personal email assistant">Sandy &mdash; your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.51qianduan.com/" title="View Values of n Blog"><img width="70" height="70" src="../Spy_Effect/images/9.png" title="" /></a>
				<h5><a href="http://www.51qianduan.com/" title="View Values of n Blog">Values of n Blog</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
		</ul>
	</div>
</div>