[CSS3技术]使用jQuery和CSS3创建Android导航

[tr][td]


当玩Galaxy Tab的花哨Android的导航。点击箭头形象应用程序图标会弹出,这不仅仅是精美的动画图标也垂直旋转的3D风格。今天教程教大家如何使用jQuery和CSS3创建Android导航。


HTML



 
 
 
 

 
 
 

 

 
 
 
 
 





CSS


#dock-wrapper {
 bottombottom: 0;
 width: 100%;
 height: 60px;
 position: fixed;
 perspective: 3000px;
}
 
 .dock {
 height: 70px;
 transform-style: preserve-3d;
 transition: transform 1s;
 }
 
 .dock-show {
 transform: translateZ(-25px) rotateX(-95deg);
 }
 
 .dock-front, .dock-top {
 position: absolute;
 display: block;
 width: 100%;
 height: 40px;
 padding: 10px 0;
 box-shadow: 0px -3px 6px rgba(0,0,0,0.3);
 }
 
 .dock-front {
 background-image: linear-gradient(to bottombottom, #434345, #161616);
 transform: translateZ(30px);
 }
 
 .dock-top {
 background-image: linear-gradient(to bottombottom, #505052, #161616);
 transform: rotateX(90deg) translateZ(29px);
 }
 
 #arrow-up, #arrow-down {
 cursor: pointer;
 transition: all .2s;
 }
 
 #arrow-up:hover {
 margin-top: -.2em;
 }
 
 #arrow-down:hover {
 margin-top: .2em;
 }
.item {
 position: absolute;
 width: 526px;
 left: 50%;
 margin-left: -263px;
}
 
 .item span {
 position: absolute;
 z-index: -1;
 cursor: pointer;
 }
 
 .item span:first-child { left: 0; }
 .item span:nth-child(2) { left: 90px; }
 .item span:nth-child(3) { left: 180px; }
 .item span:nth-child(4) { left: 270px; }
 .item span:nth-child(5) { left: 360px; }
 .item span:nth-child(6) { left: 450px; }


JavaScript


item = $('.item img');
itemReverse = item.get().reverse();
 
$('#arrow-up').on('click', function() {
 
 $('.dock').addClass('dock-show');
 
 $.each(item, function() {
 
 var i = $(this).index();
 var delay = i * 100;
 
 window.setTimeout(function (index) {
 return function () {
 item.eq(index).stop().animate({ 'top' : '-7.8em' });
 };
 } (i), delay);
 });
});
 
$('#arrow-down').on('click', function() {
 
 $('.dock').removeClass('dock-show');
 
 $.each(itemReverse, function() {
 
 var i = $(this).index();
 var delay = i * 100;
 
 window.setTimeout(function (index) {
 return function () {
 $(itemReverse).eq(index).stop().animate({ 'top' : '0' });
 };
 } (i), delay);
 });
});
$('.item img').hover(function() {
 $(this).stop().animate({ 'top' : '-8.4em' }, 'fast');
}, function() {
 $(this).stop().animate({ 'top' : '-7.8em' }, 'fast');
});
[/td][/tr]