利用jquery实现iphone联系人滑动列表



51 200 67



特效描述:利用jquery实现 iphone联系人 滑动列表,利用jquery实现iphone联系人滑动列表

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />

2. 引入JS

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

3. HTML代码

<center>
<h3>Example 1</h3>
<div id="slider">
	<div class="slider-content">
		<ul>
			<li id="a"><a name="a" class="title">A</a>
				<ul>
					<li><a href="/">Adam</a></li>
					<li><a href="/">Alex</a></li>
					<li><a href="/">Ali</a></li>
					<li><a href="/">Apple</a></li>
					<li><a href="/">Arthur</a></li>
					<li><a href="/">Ashley</a></li>
				</ul>
			</li>
			<li id="b"><a name="b" class="title">B</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="c"><a name="c" class="title">c</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="d"><a name="d" class="title">d</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="e"><a name="e" class="title">E</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="f"><a name="f" class="title">f</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="g"><a name="g" class="title">g</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="h"><a name="h" class="title">h</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="i"><a name="i" class="title">i</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="j"><a name="j" class="title">j</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="k"><a name="k" class="title">k</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="l"><a name="l" class="title">l</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="m"><a name="m" class="title">m</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="n"><a name="n" class="title">n</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="o"><a name="o" class="title">o</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="p"><a name="p" class="title">p</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="q"><a name="q" class="title">q</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="r"><a name="r" class="title">r</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="s"><a name="s" class="title">s</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="t"><a name="t" class="title">t</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="u"><a name="u" class="title">u</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="v"><a name="v" class="title">v</a>
				<ul>
					<li><a href="/">Barry</a></li>
					<li><a href="/">Becky</a></li>
					<li><a href="/">Biff</a></li>
					<li><a href="/">Billy</a></li>
					<li><a href="/">Bozarking</a></li>
					<li><a href="/">Bryan</a></li>
				</ul>
			</li>
			<li id="w"><a name="w" class="title">w</a>
				<ul>
					<li><a href="/">Calista</a></li>
					<li><a href="/">Cathy</a></li>
					<li><a href="/">Chris</a></li>
					<li><a href="/">Cinderella</a></li>
					<li><a href="/">Corky</a></li>
					<li><a href="/">Cypher</a></li>
				</ul>
			</li>
			<li id="x"><a name="x" class="title">x</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="y"><a name="y" class="title">y</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
			<li id="z"><a name="z" class="title">z</a>
				<ul>
					<li><a href="/">damien</a></li>
					<li><a href="/">danny</a></li>
					<li><a href="/">denver</a></li>
					<li><a href="/">devon</a></li>
					<li><a href="/">doug</a></li>
					<li><a href="/">dustin</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>
<br /><br />
<h3>Example 2</h3>
<a name="example-2"></a>
<div id="transformers">
	<div class="slider-content">
		<ul>
			<li id="autobots"><a name="autobots" class="title">Autobots</a>
				<ul>
					<li><a href="/">Bumblebee</a></li>
					<li><a href="/">Ironhide</a></li>
					<li><a href="/">Jazz</a></li>
					<li><a href="/">Optimus Prime</a></li>
					<li><a href="/">Ratchet</a></li>
					<li><a href="/">Ashley</a></li>
				</ul>
			</li>
			<li id="decepticons"><a name="decepticons" class="title">Decepticons</a>
				<ul>
					<li><a href="/">Barricade</a></li>
					<li><a href="/">Blackout</a></li>
					<li><a href="/">Bonecrusher</a></li>
					<li><a href="/">Brawl</a></li>
					<li><a href="/">Frenzy</a></li>
					<li><a href="/">Megatron</a></li>
					<li><a href="/">Scorponok</a></li>
					<li><a href="/">Starscream</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div></center>
<br /><br /><br />
<div align="center">
<table border="0" width="69" height="26"><tr><td width="670" height="24" align="center">
</td></tr>
</table>
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 滑动星星打分 其他更多 滑动选项卡切换 跳转 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到