首页 > 软件技巧 > 漂亮动画效果的菜单(Jquery)(原创)

漂亮动画效果的菜单(Jquery)(原创)

2012年2月12日

闲来无事翻译了一个简单的HTML结构(无需添加多余的标签)Jquery菜单的背景动画效果,

他的代码简单和效果漂亮,变化多样。

主要是改变背景图像的位置,我认为是最好的方法来创建动画的效果,我们正在寻找(和我不这么认为:第一看到的例子,在本文结尾)。

jQuery是最适合这种任务的类库,但是在这个暗箱李,它不可以改变动画背景的位置,因为需要两个值而不是一个值的动画(太糟糕了,不是所有的浏览器中实现非标准的背景位置-X-Y,如Internet Explorer)。你将不得不使用背景位置的插件,在演示链接(原插件不再是jQuery的网站上)。以前的版本不支持负数或十进制值正确。

先看HTML

没有人愿意在HTML上增加额外花哨的东西,因此,我们正在寻找一个非常简单的无序列表:

<ul>
        <li>
                <a href=”http://www.onbno.com/soft-skill/2690.html”>
                        Home
                </a>
        </li>
        <li>
                <a href=”http://www.onbno.com/soft-skill/2690.html”>
                        About
                </a>
        </li>
        <li>
                <a href=”http://www.onbno.com/soft-skill/2690.html”>
                        Contact
                </a>
        </li>
</ul>

基本的CSS

ul {
        list – style: none;
        margin: 0;
        padding: 0;
}
li {
        float: left;
        width: 100px;
        margin: 0;
        padding: 0;
        text – align: center;
}
li a {
        display: block;
        padding: 5px 10px;
        height: 100 % ;
        color: #FFF;
        text – decoration: none;
        border – right: 1px solid#FFF;
}
li a {
        background: url(bg.jpg) repeat 0 0;
}
li a: hover {
        background – position: 50px 0;
}
请注意,已声明 了悬停状态。用户使用没有JavaScript的浏览器访问这个仍能看到最终效果。我已经声明了<li>的背景,即时是它单独使用,但需要设置初始背景位置与您要使用的效果的位置。
图像
动画效果的菜单
                                                                        图1
在图1中,之前和之后的状态是左,右,但一个简单的倾斜,可以创建一个有趣的效果。动画效果的菜单
                                      图2
图2是一个小更精致。在浏览是正常和悬停状态的可见图像空间是在图像的顶部和底部。在中间的大梯度生成fade-in/out影响,随着时间的推移形成动画。梯度越大,就越少会觉得像它从底部移动,感觉更像它实际上是淡入。简单的图像文件的可以更小,更好。颜色越深的更复杂的图像,就需要一个较大的文件大小。为了效果和性能之间取得平衡。
点击查看演示页,看到这两种效果(一组其他效果等)如何运行。
javascript脚本
最后,把这个脚本整合到一起,他确实是真的很简单。当用户移动他们的鼠标进入或者移出导航这个动画就会运行。
$(‘#nav a’).css({
        backgroundPosition: “0 0”
}).mouseover(function() {
        $(this).stop().animate({
                backgroundPosition: “(0 -250px)”
        },
        {
                duration: 500
        })
}).mouseout(function() {
        $(this).stop().animate({
                backgroundPosition: “(0 0)”
        },
        {
                duration: 500
        })
})

该元素是通过美元捕获功能和给定的默认样式。这都是必要的IE和Fire fox 2,其中不报告的默认背景位置。在ie里,你可以避开这个问题,使用background-position-x和-但它更容易只设置初始值的脚本。

然后,是使鼠标离开元素的动画事件。

关键是要注意的是,任何动画前停止试图再次动画。这避免了动画排队反复移动鼠标和退出的元素。

jquery也有一个悬停方法,可以用来代替鼠标进入和离开的方法。我之所以没有用,是因为我喜欢清晰、明确的声明。悬停方法需要两个参数:这个函数在鼠标经过与离开时运行。

演示

jQuery Background Test

演示页上,我创造了四个独立的动画,请看源文件它是如何都放在一起。

软件技巧 , , 浏览399 次

本文的评论功能被关闭了.