百度经验－左串珠模拟

原生模拟

by john Chat

HTML

<body>
    <ul class="article">
        <li class="post">
            <div class="icon">1</div>
            <p>
                光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
                光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
            </p>
        </li>
        <li class="post">
            <div class="icon">2</div>
            <p>光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
                光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
            </p>
        </li>
        <li class="post">
            <div class="icon">3</div>
            <p>光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
                光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
            </p>
        </li>
        <li class="post">
            <div class="icon">4</div>
            <p>光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
                光盘安装准备：
                win7 64位纯净版安装盘
                如果您使用的苹果电脑有光驱，请优先使用自带光驱安装；
                如果电脑没有光驱，可以是用外接USB光驱安装。
            </p>
        </li>
        <div class="clearfix"></div>
    </ul>
    <div class="clearfix"></div>
    <div id="fake-icon-group">
        <a class="fake-icon fake-current" href="" title="第一个念珠">1</a>
        <a class="fake-icon" href="" title="第二个念珠">2</a>
        <a class="fake-icon" href="" title="第三个念珠">3</a>
        <a class="fake-icon" href="" title="第四个念珠">4</a>
    </div>
    <div class="long">
        <p>一堆用来显示超过隐藏的文字
            一堆用来显示超过隐藏的文字
            一堆用来显示超过隐藏的文字
     ...

CSS

body{
    margin:0;
    padding:0;
}
ul{
    list-style:none;
    float:left;
    width: 560px;
    margin-top:30px;
    padding:0;
}
.icon {
    width: 20px;
    padding:10px;
    height: 20px;;
    background:#9ce290;
    border-radius:20px;
    color:#fff;
    margin-right:20px;
    text-align: center;
    float:left;
}
li{
    margin-bottom:40px;
    float:left;
}
p{
    font-size: 28px;
    width: 500px;
    float:left;
    margin:0;
    line-height: 35px;
}
#fake-icon-group{
    position: fixed;
    left:0px;
    top:0px;
}
.fake-icon{
    width: 20px;
    padding:10px;
    height: 20px;;
    background:grey;
    color:#fff;
    border-radius: 20px;
    text-align: center;
    display: block;
    text-decoration: none;
}
.long{
    width: 560px;
    height:600px;
    margin-left:40px;
    margin-top:50px;
}

.clearfix{
    content:".";display:block;height:0;clear:both;visibility:hidden
}

JavaScript

/**
 * Created by john on 15/6/27.
 */
window.onload = function(){
    var fake_icons = document.getElementsByClassName("fake-icon");
    var icon_arr = document.getElementsByClassName("icon");
    var fake_group = document.getElementById("fake-icon-group");
    var base_line = 0;
    var block_height = 40;
    var ul_height = document.getElementsByClassName("article")[0].offsetHeight * 0.8;
    var i,fake_ln, icon_ln;
    var index = 0;

    // 上滑，下滑及到底部的状态
    var goTop;
    var goDown;
    var isBottom;

    var finishCheck = false;
    // 初始化检查当前位置
    for(i = 0, fake_ln =fake_icons.length;i < fake_ln ;i++){
        fake_icons[i].style.display = "none";
        if(!finishCheck && icon_arr[i].getBoundingClientRect().top > 0 ){
            index = i;
            finishCheck = true;
        } else if(!finishCheck){
            icon_arr[i].style.visibility = "hidden";
            fake_icons[i].style.display = "block";
        }
    }

    base_line = index * block_height;

    var scrollAction = function() {

        goTop = index <= fake_ln-1 && icon_arr[index].getBoundingClientRect().top < base_line;
        goDown = index > 0 &&  icon_arr[(index-1)].getBoundingClientRect().top + block_height > base_line;
        isBottom = -1 * (icon_arr[0].getBoundingClientRect().top) > ul_height;

        if(!isBottom){
            fake_group.style.display = "block";
            if(goTop){
                icon_arr[index].style.visibility = "hidden";
                fake_icons[index].style.display = "block";
                if(index <= fake_ln-1){
                    index++;
                    base_line += block_height;
                }
            }else if(goDown){
                if(index > 0){
                    index--;
                    base_line -= block_height;
                }
                icon_arr[index].style.visibility = "visible";
                fake_icons[index].style.display = "none";
            }
        }else{
            fake_group.style.display =...