用LiftEffect.js快速实现楼层点亮的一个案例

LiftEffect.js下载地址：http://www.lazybirdfly.com/a/tool/zzgj/127.html

要求头部卷去时导航栏固定，点击不同导航到达不同楼层，楼层变化时导航栏变化。

最终效果大致如下图：

1、HTML使用演示：

    <div class="ttt">
    <div class="shop-left-tt" id="shopnav">
        <span class="lift_item hoverqq">点我到第一层</span>
        <span class="lift_item">点我到第二层</span>
        <span class="lift_item">点我到第三层</span>
        <span class="lift_item">点我到第四层</span>
        <span class="lift_item">点我到第五层</span>
    </div>
    </div>
     
     
    <div class="f1">
    第一层的内容
    <div class="f2">
    第二层的内容
    <div class="f3">
    第三层的内容
    <div class="f4">
    第四层的内容
    <div class="f5">
    第五层的内容

2、JS调用：
 <script type="text/javascript">
        $(function(){
            LiftEffect({
                "control1": ".ttt",                           //侧栏电梯的容器
                "control2": ".shop-left-tt",                           //需要遍历的电梯的父元素
                "target": [".f1",".f2",".f3",".f4",".f5"], //监听的内容，注意一定要从小到大输入
                "current": "hoverqq"                           //选中的样式
            });
        })
    </script>

 

本文链接：https://www.dnwfb.com/286.html，转载请注明出处。