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

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/