WordPress菜单jQuery实现LavaLamp 滑动效果

JS or jQuery, 网站APP, 转自点点 13 年前 回复

, , , , ,

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

<ul id="menu-menu">
     
    <li class="current-menu-item"><a>首页</a></li>
     
    <li class=""><a>折腾</a></li>
     
    <li class=""><a>生活</a></li>
     
</ul>

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("<li class='huad' style='left:"+mml+"px;width:"+mmw+"px'></li>");  //追加滑动样式的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

支付宝打赏微信打赏

如果此文对你有帮助,欢迎打赏作者。

发表评论

欢迎回来 (打开)

(必填)