jQuery滑动盘旋动画菜单

下载地址

我们将会建立一个很酷的动画导航列表完成滑动悬停效果。我们将构建的设计工作没有jQuery首先确保它的广泛访问用户不启用Javascript,然后用jQuery增强效应对于大多数用户。基本的HTML结构

• Home
• About
• Work
• Contact

使用CSS风格的设计body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0;} body { background: #f5f0e0 url(images/noise.png);} #container { height: 800px; background: url(images/bg.jpg) center top no-repeat;} ul#nav { width: 700px; margin: 0 auto; text-align: center; overflow: hidden;} ul#nav li { float: left; list-style: none; } ul#nav li a { display: block; width: 97px; height: 77px; padding: 72px 0 0 0; margin: 0 32px 0 32px; font: bold 16px Helvetica, Arial, Sans-Serif; text-transform: uppercase; color: #9c5959; text-shadow: 0 1px 3px #c4bda6; text-decoration: none; background: url(images/label.png) 0 -149px no-repeat; } ul#nav li a:hover { background: url(images/label.png) 0 0 no-repeat; color: #eee9d9; text-shadow: 0 2px 3px #4c2222; } ul#nav li a.js:hover { background: url(images/label.png) 0 -149px no-repeat; }接下来,CSS给生活带来的设计。开始快速复位的CSS文件删除任何默认浏览器样式,然后周围设置页面设计通过添加重复噪声背景纹理到页面的身体。中心的< ul > margin: auto;和 text-align: center;和明确的元素使用 overflow: hidden;.左浮动每个<李>项并排放置每个导航项。其余的样式可以直接到锚。每个锚需要的确切尺寸标签图形,考虑任何填充用于位置的文本。复制的字体样式Photoshop使用相同的大胆Helvetica样式,并使用CSS3 text-shadow属性重新创建Photoshop阴影。最后,添加标签图像作为背景图像和位置设置为-149 px是隐藏屏幕直到鼠标导航项。设置的样式 :hover通过移动背景影响回位置和改变字体的颜色和阴影,以确保他们仍然可以看到当背景颜色的变化。HTML文件的预览会显示一个完全工作菜单设计到目前为止,尽管基本的CSS样式标签立即出现和消失,没有任何酷滑动效果。首先开发这个基本回落很重要所以禁用Javascript的用户仍将看到一个悬停效果。jQuery的效果为了添加一些Javascript效果,我们首先需要返回的HTML文件和链接了一些JS文件。我们需要三个文件:jQuery库,一个方便的插件允许动画背景地位,最后自己的空白脚本。js文件,我们将编写自己的代码。$(document).ready(function() { $("ul#nav li a").addClass("js"); $("ul#nav li a").hover( function () { $(this).stop(true,true).animate({backgroundPosition:"(0 0)"}, 200); $(this).animate({backgroundPosition:"(0 -5px)"}, 150); }, function () { $(this).animate({backgroundPosition:"(0 -149px)"}, 200); } ); });首先要增加我们的jQuery代码是一个简单的线关掉基本的CSS效果。添加一个特殊的。js与Javascript类锚允许我们添加一个额外的CSS来覆盖原来的样式。这种过时的方式我们可以实际滑动悬停效果。添加一个悬停功能菜单列表内的锚。在徘徊,使用 .animate()设置 backgroundPosition0 0,然后后退hover-out屏幕。200保持事情的速度迅速。一个额外的添加是一个片段 .stop(true,true)防止影响循环如果鼠标经过快速菜单。在浏览器中预览的效果将显示标签滑动在盘旋。我们可以添加一个额外的行真正改善的效果。增加一个额外的动画将标签仅5 px创建一个很酷的小反弹效果。类似的效果也可以通过使用宽松的插件,但是保存连接额外的文件这个小技巧很好地工作。

dd: