CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 使用jQuery和CSS3创建Android导航

使用jQuery和CSS3创建Android导航


       当玩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>      <!-- to n icon  -->  </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

点击展开全部

﹝使用jQuery和CSS3创建Android导航﹞相关内容

「使用jQuery和CSS3创建Android导航」相关专题

其它栏目

也许您还喜欢