用jQuery和CSS3制作Android Dock-插件特效-星河码客

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; } 现在我们将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'); });

用jQuery和CSS3制作Android Dock

在线演示积分下载 6毛下载砍两刀下载

文件目录······

暂无数据

猜你喜欢更多»