用jQuery和CSS3制作Android Dock

HTML
<div id="dock-wrapper">
<div class="dock">
<div class="dock-front"><img alt="箭头了" src="images/arrow-up.png" id="arrow-up"></div>
<div class="dock-top"><img alt="向下箭头" src="images/arrow-down.png" id="arrow-down">
</div></div><div class="item"><span><img width="60" src="images/launcher-pro.png"></span>
<span><img width="60" src="images/2do.png"></span>
</div></div>  
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;  
    }  
现在我们将stying图标。图标将隐藏在码头,每个图标都有绝对能够让我们轻松移动时弹出的榜首。
.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
当用户单击箭头我们将注入。dock-show类名。使动画工作对接。注射后我们将每个图标位置移动到顶部以上码头,使其对用户可见。
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');  
});