资讯专栏INFORMATION COLUMN

jq滑动箭头跟随,选项卡功能

qingshanli1988 / 1607人阅读

摘要:主要实现功能点击增加选中样式,同时箭头指向选中上滑列表页,超出显示范围做处理,默认选中第一个滑动时,箭头不显示,添加一个定时器后显示处理结果文件点击的高度判断是否点击的超出显示范围,跑上面了判断最接近显示范围的找到结束循环判

主要实现功能
1.点击li,增加选中样式,同时箭头指向选中li
2.上滑列表页,超出显示范围做处理,默认选中第一个
3.滑动时,箭头不显示,添加一个定时器,500ms后显示处理结果
html文件



    
        
        Title
    
    
    
    
    
        

css文件

*{
    box-sizing: border-box;
}
#expert{
    width: 100%;
    height:100vh;
    background: #ccc;
}
#expert .list{
    width: 30%;
    height:100%;
    overflow-y: auto;
    float: left;
}
#expert .list li{
    background: #fff;
    width: 100%;
    height: 100px;
    margin-bottom: 3px;
    border:1px solid #fff;
}
#expert .list .sel{
    border:1px solid #f00;
}

/*隐藏滚动条显示*/
#expert{
    position: relative;
    overflow: hidden;
}
#expert .list{
    position: absolute;
    left: 0;
    overflow-x: hidden;
    overflow-y: scroll;

}
/* for Chrome */
::-webkit-scrollbar {
    display: none;
}
.details{
    float: right;
    width: 68%;
    height: 100%;
    background: #ff0;
    padding-left: 2%;
    position: relative;
}
aside{
    float: left;
    width: 2%;
    height: 100vh;
    background: #0ff;
    position: relative;
    margin-left: 30%;
}
aside .print{
    width: 20px;
    height:20px;
    background: #fff;
    position: absolute;
    right: -10px;
    top:40px;
    transform:rotate(45deg);
}

显示的内容

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95716.html

相关文章

  • jq滑动箭头跟随选项功能

    摘要:主要实现功能点击增加选中样式,同时箭头指向选中上滑列表页,超出显示范围做处理,默认选中第一个滑动时,箭头不显示,添加一个定时器后显示处理结果文件点击的高度判断是否点击的超出显示范围,跑上面了判断最接近显示范围的找到结束循环判 主要实现功能1.点击li,增加选中样式,同时箭头指向选中li2.上滑列表页,超出显示范围做处理,默认选中第一个3.滑动时,箭头不显示,添加一个定时器,500ms后...

    source 评论0 收藏0
  • jq滑动箭头跟随选项功能

    摘要:主要实现功能点击增加选中样式,同时箭头指向选中上滑列表页,超出显示范围做处理,默认选中第一个滑动时,箭头不显示,添加一个定时器后显示处理结果文件点击的高度判断是否点击的超出显示范围,跑上面了判断最接近显示范围的找到结束循环判 主要实现功能1.点击li,增加选中样式,同时箭头指向选中li2.上滑列表页,超出显示范围做处理,默认选中第一个3.滑动时,箭头不显示,添加一个定时器,500ms后...

    Baoyuan 评论0 收藏0
  • 匠心打造Vue侧滑菜单组件

    摘要:本文介绍一个简单的类似的布局组件的实现,基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时,应触发默认事件,比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。 本文介绍一个简单的DrawerLayout(类似Android的DrawerLayout)布局组件的实现,基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

    sutaking 评论0 收藏0
  • 匠心打造Vue侧滑菜单组件

    摘要:本文介绍一个简单的类似的布局组件的实现,基于。介绍的内容已经制作成组件。即当不可以拖出抽屉时,应触发默认事件,比如垂直方向的滚动等等。这种优化可以将一部分复杂的计算工作提前准备好,使页面的反应更为快速灵敏。 本文介绍一个简单的DrawerLayout(类似Android的DrawerLayout)布局组件的实现,基于Vue.js。介绍的内容已经制作成 vue-drawer-layout...

    张汉庆 评论0 收藏0

发表评论

0条评论

qingshanli1988

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<