手工SEO

手工SEO首页 帝国教程 正文

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

手工SEO 2019-12-01 10:38:31 帝国教程 57℃ 手工SEO

LiftEffect.js下载地址:

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

最终效果大致如下图:

用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>

 

上一篇:网页广告在线制作——Banner maker

下一篇:设置链接在新窗口中打开

相关文章

网站分类
标签列表