当前位置:首页 > 转自点点  >> WordPress菜单jQuery实现LavaLamp 滑动效果
04日

WordPress菜单jQuery实现LavaLamp 滑动效果

作者:皇家元林 时间:2011年05月04日 围观者: 119 人 【0条评论】

滑动门里 LavaLamp 可以算应用广泛使用也比较容易的jQuery插件了。
昨晚 @万戈 童鞋写了篇滑动,jQuery部分看了尝试精简了下,还真成了:DEMO
折腾完之后受此启发,有了码一个 LavaLamp 效果的基本思路,刚又整理完善了下基本搞定完成。
html结构部分,WordPress自定义导航生成,已去除无关代码:

css部分,其中huad里的样式就是滑动的那块样式,高度什么的得自行调整:

#menu-menu{position:relative;}
    
#menu-menu li a{position:relative;z-index:2;}
    
#menu-menu .huad{height:30px;border-top:2px solid #1BA1E2;border-bottom:2px solid #1BA1E2;position:absolute;top:0px;z-index:1;}

jQuery核心代码:

//By ImMmMm.com
   
var mm=$('#menu-menu');  //一般只需修改这儿的ID
   
var mmc=mm.find('.current-menu-item');  //获取需要高亮的对象,current-menu-item为WordPress自定义导航生成
   
var mml=mmc.position().left;  //高亮对象相对父级元素的左边距
   
var mmw=mmc.width();  //获取高亮对象的宽度
   
mm.append("
  • "); //追加滑动样式的html代码,并设定宽度和左边距 var mmh=mm.find('.huad'); //获取滑动对象 mm.children('li').hover(function(){ //此导航下li鼠标移上去的事件 var anm=$(this).position().left; //此子项相对父级元素的左边距 var anw=$(this).width(); //此子项的宽度 mmh.animate({left:anm,width:anw},{queue:false,duration:300}); //滑动对象左边距和宽度的自定义动画,300毫秒内触发一次 },function(){ //鼠标移开事件 mmh.animate({left:mml,width:mmw},{queue:false,duration:300}); //滑回 });

    用.position()相对父级元素获取左边距,完美解决浏览器滚动条影响之前.offset()相对浏览器的左边距问题~
    PS:效果可能需要强制刷新下才能见到,关于文章页没效果,这个也好理解,jQuery是判断WordPress自定义导航有current-menu-item高亮时才匹配的,So...
    转自http://immmmm.com/lavalamp-sliding-effect-by-jquery.html

    标签:, , , , ,

    Leave a Reply

    

    3780