• 微信
您当前的位置:首页  > 文章 >  用LiftEffect.js快速实现楼层点亮的一个案例

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

作者:admin 时间:2019-12-18 阅读数:45人

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

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

最终效果大致如下图:

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


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:46667551
本站大部分下载资源收集于网络,但除特别说明之外,基本全部亲自测试可用!
但由于某些源码的更新迭代,比如微信小程序官方接口的变动等原因,
如时间过长,可能会造成本可以使用的代码出现问题,下载前请斟酌!
本站资源仅供学习和交流使用,版权归原作者所有,请在下载后24小时之内自觉删除。
若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,使用者自行承担,概与本站无关。

原文链接:https://www.dnwfb.com//286.html,转载请注明出处