苹果官网的产品展示效果
这是帮一个群里的朋友写的，基于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'})。
浙公网安备 33010602011771号