苹果官网的产品展示效果

这是帮一个群里的朋友写的,基于JQuery的。可以先去http://www.apple.com.cn/mac/看下具体效果,记得用chrome看,它这个貌似是用CSS3做的,IE下就是简单的作透明切换的。

JS:

(function($){
	$.fn.appleShow = function(opts){
		var set = $.extend({
			itemsClass:'',
			conctrolClass:'',
			arrowClass:'',
			auto:false,
			timer:3000,
			type:'click'
		},opts||{});
		var $t = $(this),$items = $('.'+set.itemsClass,$t),width = $items[0].offsetWidth,$conctrolbox = $('.'+set.conctrolClass,$t);
		var $conctrols = $conctrolbox.find('a'),$arrow = $conctrolbox.find('.'+set.arrowClass),len=$conctrols.length;
		var current = 0,timer = null,isSliding = false,P = [],m=0;

		$items.each(function(i){
			var $lis = $(this).find('li'),pos=[];
			$lis.each(function(i){
				pos[i] = this.offsetLeft;
			});
			P[i] = pos;
			$lis.each(function(i){
				$(this).css({'position':'absolute','top':0,'left':pos[i]});
			});

		});

        $items.hide().eq(current).show();

		$arrow.stop(true).animate({'left':$conctrols.eq(current).position().left+$conctrols.eq(current).outerWidth(true)/2});
		
		set.auto && auto();

		function auto(){
			timer = setInterval(function(){
				m = (current+1)%len;
				$conctrols.eq(m).trigger(set.type);
			},set.timer);
		};

		function go(items,dir,callback){
			var d = {'left':'-=','right':'+='}[dir],l = items.length,n=1;
			items.each(function(i){
				var t = $(this);
				setTimeout(function(){
					t.animate({'left':d+width},'normal','easeOutElastic',function(){
						if(l === n++){
							callback && callback();
						}
					});
				},i*100);
			});
		};

		function goLeft(items,callback){
			go(items,'left',callback);
		};
		function goRight(items,callback){
			var r = [];
			items.each(function(){r.push(this)});
			r = $('').pushStack(r.reverse());
			go(r,'right',callback);
		};

		function setPos(items,dir){
			items.css('left',function(i,v){ v = parseInt(v,10);return dir === 'left' ? (v-width) : (v+width)});
		}

		$conctrols.each(function(i){
			$(this)[set.type](function(event){
				event.preventDefault();
				if(isSliding || i === current) return;
				if(timer) clearInterval(timer);
				isSliding = true;
				var go,dir;
				var pos = $(this).position(),w = this.offsetWidth;
				var C = $items.eq(current),N = $items.eq(i);
				i > current ? (go = goLeft,dir = 'right') : (go = goRight,dir = 'left');
				$arrow.stop(true).animate({'left':pos.left+w/2});
				$conctrols.removeClass('show').eq(i).addClass('show');
				go(C.find('li'),function(){
					C.hide().find('li').each(function(i){ $(this).css('left',P[current][i]);});
					setPos(N.find('li'),dir);
					go(N.show().find('li'),function(){
						current = i;
						isSliding = false;
						set.auto && auto();
					});
				})
				
			});
		});

	};

	$.extend($.easing,{
		easeOutElastic: function (x, t, b, c, d) {
			var s=1.70158;var p=0;var a=c;
			if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
			if (a < Math.abs(c)) { a=c; var s=p/4; }
			else var s = p/(2*Math.PI) * Math.asin (c/a);
			return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
		}
	})
})(jQuery);

HTML:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="style/zns_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="div1" class="page">
	<div class="zns_box">
			<ul class="zns_box_head">
				<li><a href=""><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
				<li><a href=""><img src="img/2.jpg" alt=""/>iPod nano</a></li>
				<li><a href=""><img src="img/3.jpg" alt=""/>iPod classic</a></li>
				<li><a href=""><img src="img/4.jpg" alt=""/>iPod touch</a></li>
				<li><a href=""><img src="img/5.jpg" alt=""/>Apple TV</a></li>
				<li><a href=""><img src="img/6.jpg" alt=""/>Accessories</a></li>
			</ul>
			<ul class="zns_box_head">
				<li><a href=""><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
				<li><a href=""><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
				<li><a href=""><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
				<li><a href=""><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
				<li><a href=""><img src="img/11.jpg" alt=""/>MobileMe</a></li>
				<li><a href=""><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
			</ul>
			<ul class="zns_box_head">
				<li><a href=""><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>
				<li><a href=""><img src="img/2.jpg" alt=""/>iPod nano</a></li>
				<li><a href=""><img src="img/3.jpg" alt=""/>iPod classic</a></li>
				<li><a href=""><img src="img/4.jpg" alt=""/>iPod touch</a></li>
				<li><a href=""><img src="img/5.jpg" alt=""/>Apple TV</a></li>
				<li><a href=""><img src="img/6.jpg" alt=""/>Accessories</a></li>
			</ul>
			<ul class="zns_box_head">
				<li><a href=""><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>
				<li><a href=""><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>
				<li><a href=""><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>
				<li><a href=""><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>
				<li><a href=""><img src="img/11.jpg" alt=""/>MobileMe</a></li>
				<li><a href=""><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>
			</ul>
	</div>
	<div class="zns_box_foot">
		<span style="left: 460px;" class="caret"></span>
		<a href="#" class="show">123</a>
		<a href="http://www.baidu.com" >456</a>
		<a href="#" >789</a>
		<a href="#" >101112</a>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/xy.js"></script>
<script type="text/javascript">
	$('.page').appleShow({
		itemsClass:'zns_box_head',
		conctrolClass:'zns_box_foot',
		arrowClass:'caret',
		auto:true
	});
</script>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0;}
body{background:#EBEBED;_position:relative;_height:100%;}
img{border:none;display:block;}
li{list-style:none;}
.page{
	-webkit-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
	box-shadow: rgba(0,0,0,0.3) 0 1px 3px; 
	background:#FFFFFF;
	border-color: #E5E5E5 #DBDBDB #D2D2D2;
	border-style: solid;
	border-width: 1px;
	margin:5px auto 0;
	width:980px;
}
.zns_box{
	overflow: hidden;
	position: relative;
	width: 840px;
	z-index: 0;
	height:158px;
	margin: 0 70px;
}
.zns_box_head{
	width: 840px;
	height:158px;
	position: absolute;
	top:0;
	left:0;
}
.zns_box_head li{
	width:140px; 
	float:left;
	text-align: center;
}
a{
	text-decoration:none;
	font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
	color:#7F7F7F;
}
.zns_box_head li a:hover{color:#333;}
.zns_box_foot{
	height:30px; 
	text-align:center; 
	background:#fff; 
	overflow:hidden;
	background:url(../img/nav_bg.png) no-repeat 0 0;
	background:-moz-linear-gradient(center bottom, rgba(223,223,223,1) 0%, rgba(242,242,242,1) 66%, rgba(242,242,242,1) 90%, rgba(230,230,230,1) 93%, rgba(190,190,190,1) 96%, rgba(150,150,150,1) 100%);
	background:-webkit-gradient(linear, left bottom, left top, from(rgba(223,223,223,1)), color-stop(66%, rgba(242,242,242,1)), color-stop(90%, rgba(242,242,242,1)), color-stop(93%, rgba(230,230,230,1)), color-stop(96%, rgba(210,210,210,1)), to(rgba(140,140,140,1)));
	border-bottom:1px solid #ebebeb;
	position:relative;
}
.caret{
	background: url(../img/caret_active.gif) no-repeat scroll 0 0;
    display: block;
    height: 8px;
    margin: 0 0 -8px -7px;
    position: absolute;
    width: 15px;
}
.zns_box_foot a{
 	display: inline-block;
    padding: 8px 15px 6px;
	cursor:pointer;
    text-shadow: 0 1px 0 #FFFFFF;
}
.zns_box_foot .show{
    cursor: default;
    color:#2B2B2B;	
}
.zns_box_foot a:hover{color:#000;}
.zns{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}
.zns a{color:#777;font-size:16px;}
.zns a:hover{color:#555;}
.zns_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}
.zns_head .left{float:left;}
.zns_head .right{float:right;}
.zns_head a{line-height:36px;color:#777;}
.zns_head a:hover{color:#555;}

图片自己去苹果网站上下吧。

说明:这个是以插件的形式写的,调用方便,可设置是否自动切换$('xx00').appleShow({auto:true}),可设置切换事件,click,mouseover都可以,默认值为click, $('xxoo').appleShow({type:'click'})。

posted @ 2013-03-04 15:29  zjhsd2007  阅读(650)  评论(2编辑  收藏  举报