jquery.lavalamp 下划线随鼠标左右滑动的导航菜单效果

最新推荐文章于 2026-01-22 06:49:21 发布

原创最新推荐文章于 2026-01-22 06:49:21 发布 · 509 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#JavaScript #导航菜单 #下划线 #lavalamp #ViewUI

js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何使用jQuery.lavalamp插件创建一个下划线随着鼠标在导航菜单上移动的效果。包括引入文件、HTML结构、JavaScript配置、参数设置以及CSS样式。详细步骤和官方链接供参考。

jquery.lavalamp 下划线随鼠标左右滑动的导航菜单效果

引入文件

<!-- Include jQuery -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<!-- Optional: Include the easing plugin -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 
<!-- Include the lava lamp plugin -->
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>

HTML

<ul id="navlist">
    <li class="active"><a href="/">Home</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/services.html">Services</a></li>
    <li><a href="/programs.html">Programs</a></li>
    <li><a href="/contact.html">Contact</a></li>
</ul>

javascript

$('#navlist').lavalamp({
    easing: 'easeOutBack'
});

参数

OPTION	DEFAULT	PARAMETERS	DESCRIPTION	NOTES
duration	1000	Integer	Duration of transition animation.
easing	"swing"	string	Easing of transition animation.	Include and read the easing plugin to use something other than swing.
margins	false	true/false	Lava Lamp object's width and height covers the margins.
setOnClick	false	true/false	The Lava Lamp object moves to the a new element when you click.
activeObj	".active"	selector	Default active element when page is loaded.
autoUpdate	false	true/false	Lava Lamp updates itself every interval.
updateTime	100	Integer	Time between updates if using autoUpdate.
enableHover	true	true/false	Enable mouseenter and mouseleave events.	If your app is for touch devices, and touch is triggering hover.
delayOn	0	Integer	Place a delay when you enter hover state before lavalamp object animates.
delayOff	0	Integer	Place a delay when you leave hover state before lavalamp object animates.
enableFocus	false	true/false	Animate on keyboard focus.
deepFocus	false	true/false	Animate on decendant focus.

css

/*背景颜色*/
.lavalamp-object {
    background-color:#ccc;
}

/*线条*/
.lavalamp-object {
 width: 9px;
 height: 32px;
 border-bottom-width: 1px;
 border-bottom-style: solid;
 border-bottom-color: #fff;
 color: #999999;
}

官网：http://lavalamp.magicmediamuse.com/