MENU▼

JQuery插件-鼠标经过或点击元素触发跟随效果

官网
GitHub
演示


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>

CSS:

.lavalamp-object {
    /*样式,一般只需设置背景色。其他样式可能需要加!important优先级*/
}/*插件自动添加的动效容器*/


引入:

<!-- jQuery文件 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<!-- 动效文件,如果不引用,默认用CSS3效果 -->
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
 
<!-- 功能文件 -->
<script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>


lavalamp调用:

$('#navlist').lavalamp({

easing:      'swing',   // 过渡效果
duration:    700,       // 过渡效果时间
margins:     false,     // 生成的元素宽高是否包括边距
setOnClick:  false,     // 是否点击元素后添加class
activeObj:   '.active', // 设置点击元素后添加class的名称
autoUpdate:  false,     // 自动更新
updateTime:  100,       // 自动更新时间
enableHover: true,      // 插件触发事件为hover悬停,如false则为click点击
delayOn:     0,         // 进入时延迟时间
delayOff:    0,         // 离开后延迟时间
enableFocus: false,     // 键盘控制
deepFocus:   false      // 焦点控制,如input选中焦点

});


easing效果说明:
可查看easing文件源码。



请为这篇文章评分:
( 这篇文章尚未评分 )