<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>apple 最新产品展示效果</title>

<style type="text/css">

*{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;

}

.miaov_box{

overflow: hidden;

position: relative;

width: 820px;

z-index: 0;

height:158px;

margin: 0 70px;

}

.miaov_box_head{

width: 1680px;

}

.miaov_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;

}

.miaov_box_head li a:hover{color:#333;}

.miaov_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;

}

.miaov_box_foot a{

display: inline-block;

margin: 0 15px;

padding: 8px 0 6px;

cursor:pointer;

text-shadow: 0 1px 0 #FFFFFF;

}

.miaov_box_foot .show{

cursor: default;

color:#2B2B2B;

}

.miaov_box_foot a:hover{color:#000;}

.miaov{height:36px;line-height:26px;text-align:center;position:fixed;_position:absolute;bottom:0;width:100%;}

.miaov a{color:#777;font-size:16px;}

.miaov a:hover{color:#555;}

.miaov_head{height:36px;width:980px;overflow:hidden;margin:0 auto;}

.miaov_head .left{float:left;}

.miaov_head .right{float:right;}

.miaov_head a{line-height:36px;color:#777;}

.miaov_head a:hover{color:#555;}

<script type="text/javascript" src="miaov.js"></script>

<script type="text/javascript">

function getByClass(oParent, sClass)

var aEle=oParent.getElementsByTagName('*');

var aResult=[];

var i=0;

for(i=0;i<aEle.length;i++)

{

if(aEle[i].className==sClass)

{

aResult.push(aEle[i]);

}

}

return aResult;

window.onload=function ()

var oDiv=document.getElementById('div1');

var aLi=getByClass(oDiv, 'miaov_box_head')[0].getElementsByTagName('li');

var aBtn=getByClass(oDiv, 'miaov_box_foot')[0].getElementsByTagName('a');

var oCaret=getByClass(oDiv, 'caret')[0];

var aPos=[];

var timer=null;

var i=0;

for(i=0;i<aLi.length;i++)

{

aLi[i].index=i;

aPos[i]=aLi[i].offsetLeft;

}

for(i=0;i<aLi.length;i++)

{

aLi[i].style.position='absolute';

aLi[i].style.left=aPos[i]+'px';

}

aBtn[0].onclick=function ()

{

var i=aLi.length-1;

clearTimeout(timer);

function next()

{

var obj=aLi[i];

if(i>=aLi.length/2)

{

miaovStartMove(aLi[i], {left: 900}, MIAOV_MOVE_TYPE.FLEX);

timer=setTimeout(next, 100);

i--;

}

else

{

timer=setTimeout(next2, 150);

}

}

function next2()

{

if(i>=0)

{

miaovStartMove(aLi[i], {left: aPos[i]}, MIAOV_MOVE_TYPE.FLEX);

timer=setTimeout(next2, 100);

}

i--;

}

next();

aBtn[1].className='';

this.className='show';

miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);

};

aBtn[1].onclick=function ()

{

var i=0;

clearTimeout(timer);

function next()

{

var obj=aLi[i];

if(i<aLi.length/2)

{

miaovStartMove(aLi[i], {left: -200}, MIAOV_MOVE_TYPE.FLEX);

timer=setTimeout(next, 100);

i++;

}

else if(i==aLi.length/2)

{

timer=setTimeout(next2, 150);

}

}

function next2()

{

if(i<aLi.length)

{

miaovStartMove(aLi[i], {left: aPos[i-aLi.length/2]}, MIAOV_MOVE_TYPE.FLEX);

timer=setTimeout(next2, 100);

}

i++;

}

next();

aBtn[0].className='';

this.className='show';

miaovStartMove(oCaret, {left: this.offsetLeft+this.offsetWidth/2}, MIAOV_MOVE_TYPE.BUFFER);

};

<div class='miaov_head'>

<a href="http://www.sitejs.com" target="_blank" class='left'>网页特效　http://www.sitejs.com</a>

<a href="http://www.sitejs.com" target="_blank" class='right'>网页素材</a>

<div id="div1" class="page">

<div class="miaov_box">

<ul class="miaov_box_head">

<li><a href="http://www.sitejs.com"><img src="img/1.jpg" alt=""/>iPod shuffle</a></li>

<li><a href="http://www.sitejs.com"><img src="img/2.jpg" alt=""/>iPod nano</a></li>

<li><a href="http://www.sitejs.com"><img src="img/3.jpg" alt=""/>iPod classic</a></li>

<li><a href="http://www.sitejs.com"><img src="img/4.jpg" alt=""/>iPod touch</a></li>

<li><a href="http://www.sitejs.com"><img src="img/5.jpg" alt=""/>Apple TV</a></li>

<li><a href="http://www.sitejs.com"><img src="img/6.jpg" alt=""/>Accessories</a></li>

<li><a href="http://www.sitejs.com"><img src="img/7.jpg" alt=""/>Download iTunes 10</a></li>

<li><a href="http://www.sitejs.com"><img src="img/8.jpg" alt=""/>iTunes Gift Cards</a></li>

<li><a href="http://www.sitejs.com"><img src="img/9.jpg" alt=""/>Nike + iPod</a></li>

<li><a href="http://www.sitejs.com"><img src="img/10.jpg" alt=""/>(PRODUCT) RED</a></li>

<li><a href="http://www.sitejs.com"><img src="img/11.jpg" alt=""/>MobileMe</a></li>

<li><a href="http://www.sitejs.com"><img src="img/12.jpg" alt=""/>In-Ear Headphones</a></li>

</ul>

</div>

<div class="miaov_box_foot">

<span style="left: 424px;" class="caret"></span>

<a class="show">Products</a>

<a>iTunes and more</a>

</div>