jq滑動箭頭跟隨，選項卡功能

時間 2019-11-10

原文原文鏈接

主要實現功能
1.點擊li,增長選中樣式，同時箭頭指向選中li
2.上滑列表頁，超出顯示範圍作處理，默認選中第一個
3.滑動時，箭頭不顯示，添加一個定時器,500ms後顯示處理結果
html文件javascript

<!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文件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);
}

顯示的內容html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。