当前位置:首页 > 建站工具 > 站长工具

jquery单页无刷新楼层快速到达导航代码LiftEffect.js下载地址

懒鸟飞 发布于


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