使用jQuery和CSS3创建Android导航

CSS3教程手机阅读

当玩Galaxy Tab的花哨Android的导航。点击箭头形象应用程序图标会弹出,这不仅仅是精美的动画图标也垂直旋转的3D风格。今天教程教大家如何使用jQuery和CSS3创建Android导航。
HTML
<div id="dock-wrapper"> <div class="dock"> <div class="dock-front"> <img src="images/arrow-up.png" alt="Arrow Up" id="arrow-up"> </div> <div class="dock-top"> <img src="images/arrow-down.png" alt="Arrow Down" id="arrow-down"> </div> </div> <div class="item"> <span><img src="images/launcher-pro.png" width="60"></span> <span><img src="images/2do.png" width="60"></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; }.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');});

【使用jQuery和CSS3创建Android导航】相关文章

1. 使用jQuery和CSS3创建Android导航

2. 使用jQuery和CSS3创建Android导航

3. 使用jQuery和CSS3创建一个全屏幕幻灯效果

4. 使用jQuery和CSS3创建一个全屏幕幻灯效果

5. 使用jQuery和CSS3弹出图像滑块

6. 使用jQuery和CSS3实现一个数字时钟

7. 使用jQuery和CSS3弹出图像滑块

8. 使用jQuery和CSS3实现一个数字时钟

9. 一款基于jquery和css3的响应式二级导航菜单

10. 利用Jquery和CSS3 技术制作一副幻灯片

本文来源：https://www.51html5.com/a973.html