七:前端之js实现楼层滚动

1.html代码

    
    
    
    

    
    
    


    
头部
 
    
菜单
    

            

                

                    1.服饰
                    FUSHI
                
                
服饰
            
            

                

                    2.美妆
                    MEIZHUANG
                
                
美妆
            
            

                

                    3.男装
                    NANZHUANG
                
                
男装
            
            

                

                    4.女装
                    NVZHUANG
                
                
女装
            
            

                

                    5.童装
                    TONGZHUANG
                
                
童装
            
            

                

                    6.玩具
                    WANJU
                
                
玩具
            
            

                

                    7.珠宝
                    ZHUBAO
                
                
珠宝
            
            

                

                    8.母婴
                    MUYING
                
                
母婴
            
            

                

                    9.食品
                    SHIPING
                
                
食品
            
            

                

                    10.图书
                    TUDSHU
                
                
图书
            
            

                

                    11.服务
                    FUWU
                
                
服务
            
        
        

            

                

                    1F
                

                    2F
                

                    3F
                

                    4F
                

                    5F
                

                    6F
                

                    7F
                

                    8F
                

                    9F
                

                    10F
                

                    11F
            
        
        

            Top
        

2.css代码

*{
    padding:0px;
    margin: 0px;
}
.body-color{
    background-color: #F5F5F5;
}
.toubu{
    background-color: white;
    width: 100%;
    height: 120px;
    text-align: center;
    color: #4b4b4b;
    font-size: 64px;

}
.caidan{
    background-color: darkred;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    color: white;
}
.louceng-data{
    width: 1200px;
    height: 770px;
    background-color: white;
    padding:15px;
    border:1px solid #ECECEC;
    margin: 0 auto;
}
.title-data{
    width: 100%;
    height: 50px;
    color: #333;
    font-size: 18px;
    font-weight: bold;
}

.title-data span{
    margin-left: 5px;
    font-weight: normal;
}

.center-title{
    height: 720px;
    background-color: #f1f1f1;
    font-size: 64px;
    color: #333333;
    text-align: center;
    line-height: 800px;
}
.list-div{
    width: 32px;
    height: 342px;
    position: absolute;
    top: 150px;
    left: 50px;
    background-color: white;
    display: none;
}

.list-div li{
    list-style: none;
    width: 30px;
    height: 30px;
    border: 1px solid #ececec;
    text-align: center;
    line-height: 30px;
}
.list-ul li:hover a{
    cursor: pointer;
    color: yellow;
    font-size: 10px;
}
.list-ul li:hover{
    cursor: pointer;
    background: purple;
}
.Top{
    width: 40px;
    height: 40px;
    border-radius: 5px;
    background-color: red;
    color: white;
    text-align: center;
    line-height: 40px;
    position: fixed;
    bottom: 30px;
    right: 40px;
}
.Top:hover{
    background-color: purple;
    cursor: pointer;
}
.Top:active{
    background-color: yellow;
    border-radius: 100px;
    cursor: pointer;
}
a{
    text-decoration: none;
    color: black;
}

3.js代码

$(function(){
    $('#Top').draggable({
        containment:'parent',
    });
})

$(function(){
    $(window).scroll(function() {

        var nowTop = $(document).scrollTop();
                // console.log(nowTop);

        if(nowTop > 200){

            $('.list-div').css({
                display: 'block',
                position: 'fixed',
                left:50,
                top:150,
                        
            });

                    
        }else{

            $('.list-div').css({
                position: 'static',
                marginLeft: 'auto'
            });
        }

    });

})
$(function(){
    $('#Top').click(function() {
        $('html,body').animate({scrollTop: 0});
    });
})
$(function(){
    var yes_do_ok = ['服饰','美妆','男装','女装','童装','玩具','珠宝','母婴','食品','图书','服务']
    var long_ceng = ['1F','2F','3F','4F','5F','6F','7F','8F','9F','10F','11F'];
    $(document).ready(function(){
        var Uarry=$("#lou-li li");//获取所有的li元素
        $("#lou-li li").hover(function(){//点击事件
               //测试直接获取值 var v=$(this).text(); alert(v);      
               
            var count=$(this).index();//获取li的下标
            var Tresult=Uarry.eq(count).find("a").html(yes_do_ok[count]);
        },function(){
            var count=$(this).index();
            var Tresult=Uarry.eq(count).find("a").html(long_ceng[count]);
        });
   })

})

效果图如下:

QQ截图20181224131325.png

QQ截图20181224131438.png