jQuery实现仿flash上下翻转效果导航菜单的剖析

  • 作者:39℃
  • 来源:56gee
  • 更新时间:2013-06-27 12:45:02
  • 点击:9511
[100分]

该实例主要利用jQuery内置的自定义动画函数animate(通过设置CSS 样式及相关值来产生动画特效)来实现仿flash上下翻转效果的导航菜单。至于animate的用法,这里就不作详细解析了。这里先让大家浏览一下导航上下翻滚的分解原理和最终的实现特效吧!


分解原理视图(图1)
实例演示


最终特效图(图2)
实例演示

从图1的效果演示可知,每个单独的导航菜单都设置了一个上下移动的动画。此时可能有人会问,这根图2的最终效果有啥关系呢?确实关系很大,细心的朋友应该发现到,如果把图1第二排的导航遮盖一下,不就是图2的真身吗?Bingo!其实它们是完全一样的动画效果,只是图1把第二排元素的CSS样式设置为overflow:hidden。

看到这,相信有些朋友已经稍有灵感了——就是通过两层不同的导航菜单效果进行上下切换来实现的。而两排导航菜单除了背景各异以外,表面看上去都是一样的(这里通过prepend来复制对象)。

下面截取源码的核心部分——

$(document).ready(function() {     
  jQuery.Nav_56gee = function(NavHover_56gee) { 
    $(NavHover_56gee).prepend(""); 
     
    $(NavHover_56gee).each(function() {  
        var linkText = $(this).find("a").html(); 
        $(this).find("span").show().html(linkText);  
    });  
     
    $(NavHover_56gee).hover(function() {     
        $(this).find("span").stop().animate({ 
            marginTop: "-34"//li的高度  
        }, 250); 
    } , function() {  
        $(this).find("span").stop().animate({ 
            marginTop: "0" 
        }, 250); 
    });     
  }; 
  //下面是调用方法,一个页面也可以调用很多次 
  $.Nav_56gee("#menu li"); 
}); 

这里还要提醒一下,因为这个上下翻滚的效果基本在同一位置上是重叠的,所以在设计上应该保持它们高度的相同,并保证高度和上下移动位置的一致性;不然最终效果会显示很怪异的。另外,该特效不是单局限于有背景图的导航菜单中,使用透明色的文字效果也同样很酷的!

源码下载

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华