PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > JS特效 > 菜单导航 > 正文

    lavalamp.js实现阿里妈妈具有滑动效果的导航菜单特效

    作者:admin来源:B5教程网浏览:时间:2014-05-12 07:46:58我要评论
    分享到

    内容介绍

    今天我们介绍的这个菜单,大家想必都看过,它看起来非常像flash,我们都知道,在css中,我们可以通过text-decoration来实现下划线,但它这个代码却可以加上current的样式名:
     
    复制代码 代码如下:
     return this.each(function() {
                var b = $(this),
                noop = function() {},
                $back = $('<li class="back"><div class="left"></div></li>').appendTo(b),
                $li = $("li", this),
                curr = $("li.current", this)[0] || $($li[0]).addClass("current")[0];
                $li.not(".back").hover(function() {
                    move(this)
                },
                noop);
                $(this).hover(noop,
                function() {
                    move(curr)
                });
    切换,感觉很神奇,当你将鼠标移到你想要的链接时,它就会跑过去,你移开后,它就会返回currnet那个链接。。。我们以阿里妈妈为例:
    lavalamp.js实现阿里妈妈具有滑动的导航菜单特效


    这样的效果,我们有一个脚本叫“lavalamp”,当我打开阿里妈妈的源文件时,我发现阿里妈妈也引用了这个脚本:lavalamp.js
    在我们的代码中,我们加多一个easing.js用来重写jquery的animate函数,实现像css3中的transform功能。。。
    下载资源:147 下载积分:0 积分
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-50-202-1.html
    相关热词搜索: lavalamp 滑动 导航菜单 js网页特效