LiftEffect.js插件可以实现单页无刷新楼层快速到达导航,滚动页面到不同的楼层,对应的导航栏目高亮显示。
插件使用方法:
1、先在页面调用juqery和LiftEffect,代码如下:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/LiftEffect.js"></script>
2、html代码如下:
<div class="lift-nav">
<ul class="lift">
<li>1楼</li>
<li>2楼</li>
<li>3楼</li>
<li>4楼</li>
<li>5楼</li>
<li>6楼</li>
</ul>
</div>
<div class="lift-target">
<div class="t1">这是1楼</div>
<div class="t2">这是2楼</div>
<div class="t3">这是3楼</div>
<div class="t4">这是4楼</div>
<div class="t5">这是5楼</div>
<div class="t6">这是6楼</div>
</div>
3、js代码设置监听的html,代码如下:
<script type="text/javascript">
$(function(){
LiftEffect({
"control1": ".lift-nav", //侧栏电梯的容器
"control2": ".lift", //需要遍历的电梯的父元素
"target": [".t1",".t2",".t3",".t4",".t5",".t6"], //监听的内容,注意一定要从小到大输入
"current": "current" //选中的样式
});
})
</script>
以上内容,可以参考本插件的内容。
下载地址:https://pan.baidu.com/s/1hS4vRGMjI8plSDPwbR8ECQ
提取密码:59oz