商城楼层跳转 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="loucen.css" />
        <script src="jquery-2.1.0.js"></script>
        <script src="loucen.js"></script>
    </head>
    <body>
        <div class="header">header</div>
        <div class="main">
            <div class="mainbox" style="background:palegoldenrod">1</div>
            <div class="mainbox" style="background:palegreen">2</div>
            <div class="mainbox" style="background:paleturquoise">3</div>
            <div class="mainbox" style="background:palevioletred">4</div>
            <div class="mainbox" style="background:papayawhip">5</div>
            <div class="mainbox" style="background:peru">6</div>
            <div class="mainbox" style="background:plum">7</div>
        </div>
        <div class="footer">footer</div>
        <ul>
            <li class="btn">
                <span class="first">1F</span>
                <span class="second">美妆</span>
            </li>
            <li class="btn">
                <span class="first">2F</span>
                <span class="second">家电</span>
            </li>
            <li class="btn">
                <span class="first">3F</span>
                <span class="second">女装</span>
            </li>
            <li class="btn">
                <span class="first">4F</span>
                <span class="second">美食</span>
            </li>
            <li class="btn">
                <span class="first">5F</span>
                <span class="second">汽车</span>
            </li>
            <li class="btn">
                <span class="first">6F</span>
                <span class="second">家具</span>
            </li>
            <li class="btn">
                <span class="first">7F</span>
                <span class="second">生活</span>
            </li>
            <li class="last">Top</li>
        </ul>
    </body>
</html>

css样式表

*{margin:0;padding: 0;}
ul li{
    list-style:none;
}
.header,.footer{
    width: 100%;
    height: 400px;
    background: #ccc;
    text-align: center;
    color: #000;
    line-height: 400px;
    font-size: 70px;
}
.mainbox{
    width: 100%;
    height: 600px;
    text-align: center;
    color: #a55;
    line-height: 600px;
    font-size: 70px;
    font-weight: bold;
    margin: 0 auto;
}

ul{
    position: fixed;
    width: 30px;
    border: 1px solid purple;
    right: 8%;
    top: 200px;
}
ul{
    display: none;
}
ul li{
    width: 30px;
    height: 30px;
    text-align: center;
    line-height:30px;
    overflow: hidden;
    background: #fff;
}
li.btn{
    border-bottom:1px solid purple;
    font-size: 12px;
}
.last{
    font-size: 16px;
    font-weight: bold;
}
span{
    display: block;
    width: 30px;
    height: 30px;
}
.second{
    background:purple;
    color:#fff;
}
.focus{
    display: none;
}
.active{
    display: none;
}

jQuery特效js

$(function(){
    
    $(".btn").hover(function(){
        $(this).find(".first").addClass("focus")
    },function(){
        $(this).find(".first").removeClass("focus")
    })
    
    $(document).scroll(function(){
        var tops=$(this).scrollTop();
        if(tops>=200){
             $("ul").show(700)
        }else{
            $("ul").hide(700)
        }
        $(".mainbox").each(function(i,o){
            var bTop=$(o).offset().top;
            if(tops>=bTop){
                $(".first").removeClass("active").eq(i).addClass("active")
            }
        })
    })
    
    $(".btn").click(function(){
        var index=$(this).index();
        var topss=$(".mainbox").eq(index).offset().top;
        $("html,body").stop().animate({scrollTop:topss},800)
    })
    
    $(".last").click(function(){
        $("html,body").stop().animate({scrollTop:0},800)
    })
    
})

最后在引入本地jQuery文件或者外部引用

 

posted @ 2017-07-20 17:54  冯玉真  阅读(113)  评论(0)  编辑  收藏  举报