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

最新推荐文章于 2022-11-05 20:49:30 发布

weixin_33860722

最新推荐文章于 2022-11-05 20:49:30 发布

阅读量224

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000015389777

版权

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <link rel="stylesheet" type="text/css" href="css/expert.css"/>
    <link rel="stylesheet" type="text/css" href="css/base/reset.css"/>
    <script src="js/base/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
    <body>
        <article id="expert">
            <ul class="list">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <aside>
                <p class="print"></p>
            </aside>
            <article class="details">

            </article>
        </article>
    </body>
    <script type="text/javascript">
        $(".list li:first-child").addClass("sel")
        var scrollTop=0;
        var Ptop =38;
        var oHeig=$(".list li")[0].offsetHeight;
        var listHeig=$(".list")[0].offsetHeight;
        $(".list li").click(function () {
            $(".list li").removeClass("sel")
            $(this).addClass("sel")
            console.log($(this)[0].clientHeight)
            console.log($(this)[0].offsetTop-scrollTop)
            console.log($(this))
            Ptop=$(this)[0].offsetTop-scrollTop+38;
            $(".print").css("top",Ptop+"px")
            return Ptop;
        })
        $(".list").scroll(function () {
            $(".print").hide()
//            console.log("点击的高度"+$(this))
//            console.log($(this).scrollTop())
            Ptop=$(".sel")[0].offsetTop-scrollTop+38;
            scrollTop=$(this).scrollTop();
            //判断是否点击的li超出显示范围，跑上面了(Ptop<0)
            if(Ptop<0){
                for(var i=0;i<$(".list li").length;i++){
                    //判断最接近显示范围的li,找到结束循环
                    if($(".list li")[i].offsetTop+oHeig-scrollTop>0){
                        $(".list li").removeClass("sel")
                        $($(".list li")[i]).next().addClass("sel")
                        break;
                    }
                }
            }else if(Ptop>listHeig){
                for(var i=0;i<$(".list li").length;i++){
                    //判断最接近显示范围的li,找到结束循环
                    if($(".list li")[i].offsetTop+oHeig-scrollTop>0){
                        $(".list li").removeClass("sel")
                        $($(".list li")[i]).next().addClass("sel")
                        break;
                    }
                }
            }
            $(".print").css("top",Ptop+"px")
            setTimeout(function () {
                $(".print").show();
            },500)
            return scrollTop
        })
    </script>
</html>

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);
}

显示的内容

图片描述

weixin_33860722

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq滑动箭头跟随，选项卡功能

主要实现功能1.点击li,增加选中样式，同时箭头指向选中li2.上滑列表页，超出显示范围做处理，默认选中第一个3.滑动时，箭头不显示，添加一个定时器,500ms后显示处理结果html文件<!DOCTYPE html><html lang="en"> <head> <me...
复制链接

扫一扫