经验分享程序开发文档资料数据资源其它资源

iphone联系人滑动列表特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 iphone联系人滑动列表特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

iphone联系人滑动列表特效代码

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iphone联系人滑动列表</title>
<link rel="stylesheet" type="text/css" href="slidernav.css" media="screen, projection" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="slidernav.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#slider').sliderNav();
		$('#transformers').sliderNav({items:['autobots','decepticons'], debug: true, height: '300', arrows: false});
	});
</script>
<style>
	/* The following styles are used only for this page - the actual plugin styles are in slidernav.css */
	* { margin: 0; padding: 0; }
	body { padding: 40px; background: #eee; font-family: Verdana, Arial; font-size: 12px; line-height: 18px; }
	a { text-decoration: none; }
	h2, h3 { margin: 0 0 20px; text-shadow: 2px 2px #fff; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
	pre { background: #fff; width: 460px; padding: 10px 20px; border-left: 5px solid #ccc; margin: 0 0 20px; }
	p { width: 500px; font-size: 18px; line-height: 24px; margin: 0 0 30px; }
</style>
</head>
<body>
<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>
</div>
</body>
</html>

JS代码(slidernav-min.js):

/* * SliderNav - A Simple Content Slider with a Navigation Bar * Copyright 2010 Monjurul Dolon,http://mdolon.com/ * Released under the MIT,BSD,and GPL Licenses. * More information:http://devgrow.com/slidernav */
$.fn.sliderNav=function(options){
	var defaults={
	items:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],debug:false,height:null,arrows:true}
;
	var opts=$.extend(defaults,options);
	var o=$.meta?$.extend({
}
,opts,$$.data()):opts;
	var slider=$(this);
	$(slider).addClass('slider');
	$('.slider-content li:first',slider).addClass('selected');
	$(slider).append('<div class="slider-nav"><ul></ul></div>');
	for(var i in o.items)$('.slider-nav ul',slider).append("<li><a alt='#"+o.items[i]+"'>"+o.items[i]+"</a></li>");
	var height=$('.slider-nav',slider).height();
	if(o.height)height=o.height;
	$('.slider-content,.slider-nav',slider).css('height',height);
	if(o.debug)$(slider).append('<div id="debug">Scroll Offset:<span>0</span></div>');
	$('.slider-nav a',slider).mouseover(function(event){
	var target=$(this).attr('alt');
	var cOffset=$('.slider-content',slider).offset().top;
	var tOffset=$('.slider-content '+target,slider).offset().top;
	var height=$('.slider-nav',slider).height();
	if(o.height)height=o.height;
	var pScroll=(tOffset-cOffset)-height/8;
	$('.slider-content li',slider).removeClass('selected');
	$(target).addClass('selected');
	$('.slider-content',slider).stop().animate({
	scrollTop:'+='+pScroll+'px'}
);
	if(o.debug)$('#debug span',slider).html(tOffset);
}
);
	if(o.arrows){
	$('.slider-nav',slider).css('top','20px');
	$(slider).prepend('<div class="slide-up end"><span class="arrow up"></span></div>');
	$(slider).append('<div class="slide-down"><span class="arrow down"></span></div>');
	$('.slide-down',slider).click(function(){
	$('.slider-content',slider).animate({
	scrollTop:"+="+height+"px"}
,500);
}
);
	$('.slide-up',slider).click(function(){
	$('.slider-content',slider).animate({
	scrollTop:"-="+height+"px"}
,500);
}
);
}
}
;

JS代码(slidernav.js):

/* * SliderNav - A Simple Content Slider with a Navigation Bar * Copyright 2010 Monjurul Dolon,http://mdolon.com/ * Released under the MIT,BSD,and GPL Licenses. * More information:http://devgrow.com/slidernav */
$.fn.sliderNav = function(options){
	var defaults ={
	items:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"],debug:false,height:null,arrows:true}
;
	var opts = $.extend(defaults,options);
	var o = $.meta ? $.extend({
}
,opts,$$.data()):opts;
	var slider = $(this);
	$(slider).addClass('slider');
	$('.slider-content li:first',slider).addClass('selected');
	$(slider).append('<div class="slider-nav"><ul></ul></div>');
	for(var i in o.items) $('.slider-nav ul',slider).append("<li><a alt='#"+o.items[i]+"'>"+o.items[i]+"</a></li>");
	var height = $('.slider-nav',slider).height();
	if(o.height) height = o.height;
	$('.slider-content,.slider-nav',slider).css('height',height);
	if(o.debug) $(slider).append('<div id="debug">Scroll Offset:<span>0</span></div>');
	$('.slider-nav a',slider).mouseover(function(event){
	var target = $(this).attr('alt');
	var cOffset = $('.slider-content',slider).offset().top;
	var tOffset = $('.slider-content '+target,slider).offset().top;
	var height = $('.slider-nav',slider).height();
	if(o.height) height = o.height;
	var pScroll = (tOffset - cOffset) - height/8;
	$('.slider-content li',slider).removeClass('selected');
	$(target).addClass('selected');
	$('.slider-content',slider).stop().animate({
	scrollTop:'+=' + pScroll + 'px'}
);
	if(o.debug) $('#debug span',slider).html(tOffset);
}
);
	if(o.arrows){
	$('.slider-nav',slider).css('top','20px');
	$(slider).prepend('<div class="slide-up end"><span class="arrow up"></span></div>');
	$(slider).append('<div class="slide-down"><span class="arrow down"></span></div>');
	$('.slide-down',slider).click(function(){
	$('.slider-content',slider).animate({
	scrollTop:"+="+height+"px"}
,500);
}
);
	$('.slide-up',slider).click(function(){
	$('.slider-content',slider).animate({
	scrollTop:"-="+height+"px"}
,500);
}
);
}
}
;

CSS代码(slidernav.css):

/* * SliderNav - A Simple Content Slider with a Navigation Bar * Copyright 2010 Monjurul Dolon,http://mdolon.com/ * Released under the MIT,BSD,and GPL Licenses. * More information:http://devgrow.com/slidernav */
.slider{width:300px;min-height:250px;display:block;position:relative;background:#fff;overflow:hidden;}
.slider ul{list-style:none;}
.slider-content{float:left;width:100%;display:block;overflow:auto;min-height:250px;}
.slider-content ul{float:left;width:100%;display:block;position:relative;}
.slider-content ul li{float:left;width:100%;}
.slider-content ul ul li a{padding:5px 10px;display:block;border-bottom:1px solid #f3f3f3;text-transform:capitalize;}
.slider-content ul ul li a:hover{background:#f3faff;border-color:#d5ebf9;}
.slider-content .title{padding:5px 0;text-indent:10px;background:#bbb;color:#fff;width:100%;float:left;font-weight:bold;text-transform:uppercase;}
.slider-content .selected .title{background:#666;}
.slider .slider-nav{position:absolute;right:0;top:0;background:#666;min-height:250px;}
.slider .slider-nav ul{padding:5px 0;}
.slider .slider-nav li a{padding:3px 5px;line-height:13px;text-align:center;color:#fff;font-weight:bold;display:block;text-transform:uppercase;cursor:pointer;}
.slider #debug{position:absolute;bottom:0;left:0;padding:5px;background:#000;color:#fff;}
.slider .arrow{font-size:0px;line-height:0%;width:0px;border-bottom:8px solid #fff;border-left:5px solid #333;border-right:5px solid #333;position:relative;top:5px;}
.slider .down{border-bottom:none;border-top:8px solid #fff;top:15px;}
.slider .slide-up,.slider .slide-down{height:20px;background:#333;text-align:center;cursor:pointer;float:right;width:100%;position:relative;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
27.46 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
27.46 KB
立即下载
华素
了解
打赏作者 鼓励作者
Html Js 菜单导航特效6
最新结算
股权转让协议意向书模板
类型: .docx 金额: CNY 2.23￥ 状态: 待结算 详细>
股权转让协议意向书模板
类型: .docx 金额: CNY 0.28￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3图片向上3D翻转渐隐消失特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 2.39￥ 状态: 待结算 详细>
.net c# 将金额转人名币大写金额
类型: .rar 金额: CNY 0.3￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 2.23￥ 状态: 待结算 详细>
合伙退伙协议书范本模板
类型: .doc 金额: CNY 0.28￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章