jQuery樓層效果

最後更新：2017-05-11 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：nim 點擊 ext stop 一半元素 lis ajax tps

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery樓層效果</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script>
       $(function () {
        $(window).scroll(function () { //擷取捲軸
            var winH=$(window).height();//擷取視窗可視地區的高度
            var scrollTop=$(window).scrollTop();
            if(scrollTop>=$("#header").height()){//當滾動的長度大於header的高度時，“樓梯”和“回到頂部” 淡入

                $("#stairs").fadeIn();
                $("#top").fadeIn();

                            // each() 遍曆擷取 找到所有的樓層   (i=索引，el=當前元素)
                            $(".floor").each(function (i,el) {
                                    //擷取每個樓層到瀏覽器可視區頂部的距離
                                     var floor_top=$(el).offset().top;
                                    if(winH+scrollTop-$(this).offset().top>=winH/2){//視窗可視地區的高度+被卷上去的高度-當前元素的高度>=視窗可視地區的高度的一半
                                        $("#stairs li").eq(i).addClass("on").siblings().removeClass("on");
                                    }
                            })
                                   }else {    //否則，當滾動的長度大於header的高度時，“樓梯”和“回到頂部” 淡出
                                    $("#stairs").fadeOut();
                                    $("#top").fadeOut();
                                }
                            })

               //點擊變高亮  //事件委託

           $("#stairs").on("click","li",function () {

               $(this).addClass("on").siblings().removeClass("on");
               var index=$(this).index();
              // console.log(index);
             //點擊回到對應樓層
           var floor_scrolltop=$(".floor").eq(index).offset().top;
                //擷取對應索引的樓層，距離頂部的距離
           $("html,body").stop().animate({"scrollTop": floor_scrolltop},500,function () {

           })


           })


  //回到頂部
       $("#top").click(function () {
           $("html,body").animate({
               "scrollTop":0
           },500)
       })

       })

    </script>
    <style>
        *{
            margin: 0px;
            padding:0px;
        }
        #header{
            height: 200px;
            background-color: lightskyblue;
            font-size: 50px;
            line-height: 200px;
            text-align: center;

        }
        .floor {
            height:1000px;
            color: white;
            font-size: 80px;
            line-height: 1000px;
            text-align: center;

        }
        #footer{
             height: 600px;
             color: white;
             font-size: 50px;
             line-height: 400px;
             text-align: center;
            background-color: #9c2f06;
         }
        ul{
            list-style: none;
            z-index: 110000;
            position: absolute;
            left: 10px;
            top: 100px;
            width: 100px;
            border: 1px solid white;
            text-align: center;
            background-color: gray;
            opacity: 0.8;
            display: none;
            position: fixed;

        }
        li{

            color: white;
            border: 1px solid white;
            width: 100px;
            height: 60px;
            line-height: 50px;


        }
        #top{
            height: 40px;
            width: 60px;
            border: 1px solid black;
            line-height: 40px;
            background-color:gray;
            font-size: 15px;
            font-weight: bold;
            color: white;
            text-align: center;
            z-index: 200;
            border-radius: 5px;
            position: fixed;
            top: 900px;
            left: 1830px;
            display: none;

        }
        #stairs li:hover span{display: block;background-color: lightpink;height: 60px}
        #stairs li:hover em{display: none;}

        span{
            display: none;
        }

        .on{background-color: red}
    </style>
</head>
<body>
<ul id="stairs">
    <li class="on">
        <em>1F</em>
        <span>服飾</span>
    </li>
    <li> <em>2F</em>
        <span>美妝</span>
    </li>
    <li>
        <em>3F</em>
        <span>手機</span>
    </li>
    <li>
        <em>4F</em>
        <span>家電</span>
    </li>
    <li>
        <em>5F</em>
        <span>數位</span>
    </li>
    <li>
        <em>6F</em>
        <span>運動</span>
    </li>
    <li>
        <em>7F</em>
        <span>居家</span>
    </li>
    <li>
        <em>8F</em>
        <span>母嬰</span>
    </li>
    <li>
        <em>9F</em>
        <span>食品</span>
    </li>
    <li>
        <em>10F</em>
        <span>圖書</span>
    </li>
    <li>
        <em>11F</em>
        <span>服務</span>
    </li>
</ul>
<div id="top">goTop</div>
<div id="header">頭部</div>
<div id="main">
    <div class="floor" style="background-color: red">服飾</div>
    <div class="floor" style="background-color: orange">美妝</div>
    <div class="floor" style="background-color: yellow">手機</div>
    <div class="floor" style="background-color: lightpink">家電</div>
    <div class="floor" style="background-color: lightgreen">數位</div>
    <div class="floor" style="background-color: green">運動</div>
    <div class="floor" style="background-color: cyan">居家</div>
    <div class="floor" style="background-color: blue">母嬰</div>
    <div class="floor" style="background-color: purple">食品</div>
    <div class="floor" style="background-color: lightseagreen">圖書</div>
    <div class="floor" style="background-color: lightcoral">服務</div>
    <div id="footer">尾部</div>
</body>
</html>

jQuery樓層效果

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

jQuery樓層效果

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support