• 懒鸟飞:帝国cms模板专业分享平台,新域名:lanniaofei.com

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

LiftEffect.js下载地址:http://www.lanniaofei.com/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>

 
 
QQ在线咨询
QQ客服
淘宝官网