jQuery實現商品樓層和電梯功能

時間 2020-03-06

原文原文鏈接

效果圖javascript

floor.htmlcss

<!DOCTYPE html>
<html lang="zh-CN"><!-- 設置簡體中文 -->
<head>
    <meta charset="UTF-8">
    <title>floor</title>
    <link rel="stylesheet" href="../css/base.css">
    <link rel="stylesheet" href="../css/floor.css">
</head>
<body>
    <!-- 1F -->
    <div class="floor">
        <div class="container">
            <img src="../img/floor-loading.gif">
        </div>
    </div>

    <!-- 2F一 -->
    <div class="floor">
        <div class="container">
            <img src="../img/floor-loading.gif">
        </div>
    </div>

    <!-- 3F -->
    <div class="floor" >
        <div class="container">
            <img src="../img/floor-loading.gif">
        </div>
    </div>

    <!-- 4F -->
    <div class="floor">
        <div class="container">
            <img src="../img/floor-loading.gif">
        </div>
    </div>

    <!-- 5F -->
    <div class="floor">
        <div class="container">
            <img src="../img/floor-loading.gif">
        </div>
    </div>

    <!-- elevator -->    
    <div class="elevator container" id="elevator">
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F1</span>
            <span class="elevator-text">服飾</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F2</span>
            <span class="elevator-text">美妝</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F3</span>
            <span class="elevator-text">手機</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F4</span>
            <span class="elevator-text">家電</span>
        </a>
        <a href="javascript:;" class="elevator-item">
            <span class="elevator-num">F5</span>
            <span class="elevator-text">數碼</span>
        </a>
    </div>

    <script src="../js/jquery.js"></script>
    <script src="../js/transition.js"></script>
    <script src="../js/showhide.js"></script>
    <script src="../js/tab2.js"></script>
    <script src="../js/floor.js"></script>
</body>
</html>

base.css http://www.javashuo.com/article/p-hddyogwd-by.html
floor.csshtml

/*基本樣式    */
    .container{
        width:1200px;
        margin:0 auto;
    }
    .transition{
        -webkit-transition:all .5s;
        -moz-transition:all .5s;
        -ms-transition:all .5s;
        -o-transition:all .5s;
        transition:all .5s;
    }
    .text-hidden{
        text-indent:-9999px;
        overflow:hidden;
    }
    .fl{
        float:left;
    }
/*floor樓層區域*/
    .floor{
        margin-top:7px;
        height:534px;
    }
    .floor .container{
        position: relative;
        z-index:1;
    }
    .tab-head{
        height:68px;
        border-bottom:1px solid #f01414;
    }
    .tab-head-title{
        margin-top:22px;
    }
    .tab-head-title-num{
        display: inline-block;
        width:24px;
        height:24px;
        border-radius:50%;
        background-color:#07111b;
        color:#fff;
        text-align: center;
        line-height:24px;
        margin-right:10px;
    }
    .tab-head-title-name{
        font-size:20px;
        color:#07111b;
        position: relative;
        top:3px;
    }
    .tab-head-item-wrap{
        margin-top:8px;
        height:62px;
        line-height:62px;
    }
    .tab-head-item{
        display: inline-block;
        font-size:14px;    
        color:#93999f;
        margin-right:16px;
    }
    .tab-head-item-active{
        color:#f01414;
        background:url(../img/floor-arrow.png) center bottom no-repeat;
    }
    .tab-head-item-divider{
        display: inline-block;
        width:1px;
        height:14px;
        background-color:#d9dde1;
        margin-top:21px;
        margin-right:16px;
    }
    .tab-body{
        height:466px;
    }
    .tab-body-panel{
        height:466px;
        display: none;
    }
    .tab-body-panel-item{
        width:200px;
        height:233px;
        text-align: center;
    }
    .tab-body-panel-item:hover{
        box-shadow:0 0 10px rgba(0,0,0,.2);
    }
    .tab-body-panel-item-pic{
        margin-top:24px;
    }
    .tab-body-panel-item-name{
        margin-top:23px;
        font-size:12px;
        color:#07111b;
    }
    .tab-body-panel-item-price{
        margin-top:9px;
        font-size:14px;
        color:#f01414;
    }

/*elevator*/
    .elevator{
        position: fixed;
        left:50%;
        top:50%;
        margin-top:-90px;
        margin-left:-640px;
        /*container寬度1200px,50%是-600px，再移動-40px左右的距離*/
    }
    .elevator-item{
        width:24px;
        height:35px;
        display: block;
        line-height: 35px;
        text-align: center;
        color:#4d555d;
        border-top:1px solid #d9dde1;
    }
    .elevator-item:hover,
    .elevator-item-active{
        color:#f01414;
    }
    .elevator-num{

    }
    .elevator-text{
        display: none;
    }
    .elevator-item:hover .elevator-num,
    .elevator-item-active .elevator-num{
        display: none;
    }
    .elevator-item:hover .elevator-text,
    .elevator-item-active .elevator-text{
        display: block;
    }

transition.js http://www.javashuo.com/article/p-nbnfsgpd-w.html
showhide.js http://www.javashuo.com/article/p-cgnrmqkl-h.html
tab2.js http://www.javashuo.com/article/p-ocnvychx-g.html
floor.jsjava

// 不要暴露在全局，使用匿名函數自執行
(function($){

    "use strict";

//floor
    var $floor=$(".floor");

    //樓層數據
    var floorData=[
        {
            num:"1",
            text:"服裝箱包",
            tabs:["大牌","男裝","女裝"],
            offsetTop:$floor.eq(0).offset().top,
            height:$floor.eq(0).height(),
            items:[
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ]
            ]
        },
        {
            num:"2",
            text:"個護美妝",
            tabs:["熱門","國際大牌","國際名品"],
            offsetTop:$floor.eq(1).offset().top,
            height:$floor.eq(1).height(),
            items:[
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ]
            ]
        },
        {
            num:"3",
            text:"手機通信",
            tabs:["熱門","品質優選","新機嚐鮮"],
            offsetTop:$floor.eq(2).offset().top,
            height:$floor.eq(2).height(),
            items:[
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ]
            ]
        },
        {
            num:"4",
            text:"家用電器",
            tabs:["熱門","你們電","生活電器"],
            offsetTop:$floor.eq(3).offset().top,
            height:$floor.eq(3).height(),
            items:[
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ]
            ]
        },
        {
            num:"5",
            text:"電腦數碼",
            tabs:["熱門","電腦/平板","潮流影音"],
            offsetTop:$floor.eq(4).offset().top,
            height:$floor.eq(4).height(),
            items:[
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ],
                [
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    },
                    {
                        name:"匡威男棒球開衫外套2020",
                        price:"￥479"
                    }
                ]
            ]
        }
    ];

    //提早加載圖片
    function loadImg(url,success,fail){
        var image=new Image();

        image.onload=function(){
            if(typeof success==="function") success();
        }
        image.onerror=function(){
            if(typeof fail==="function") fail();
        }
        image.src=url;
    }

    //按需加載圖片
    function loadImgs($imgs,success,fail){    
        $imgs.each(function(_,el){
            var $img=$(el);

            loadImg($img.data("src"),function(url){        
                var url=$img.data('src');    
                $img.attr("src",url);
                success();
            },function(url){            
                fail($img,url);
            })
        });
    }

    //延遲加載
    function loadUtil(options){
        var items={},
            loadedItemsNum=0,
            loadFn=null,
            $elem=options.$container,
            id=options.id,
            totalItemNum=options.totalItemNum,
            triggerEvent=options.triggerEvent;

        //接收開始顯示圖片的消息
        $elem.on(triggerEvent,loadFn=function(e,i,elem){

            if(items[i] !== "loaded"){
                //觸發開始加載圖片的自定義事件
                $elem.trigger(id+"-loadItems",[i,elem,function(){
                    items[i]="loaded";
                    loadedItemsNum++;

                    if(loadedItemsNum===totalItemNum){
                        //觸發所有加載完畢的自定義事件
                        $elem.trigger(id+"-itemsLoaded");
                    }                    
                }]);                
            }        
        });
        //綁定所有加載完畢的自定義事件
        $elem.on(id+"-itemsLoaded",function(e){
            //清除事件
            $elem.off(triggerEvent,loadFn);
        });        
    }

    //建立floor結構
    function buildFloor(floorData){
        var html="";
        html+=`<div class="container">`;
        html+=buildFloorHead(floorData);
        html+=buildFloorBody(floorData);
        html+=`</div>`;

        return html;
    }

    //建立floor頭部
    function buildFloorHead(floorData){
        var html="";
        html+=`<div class="tab-head">
                <div class="tab-head-title fl">
                    <span class="tab-head-title-num">`+floorData.num+`F</span><span class="tab-head-title-name">`+floorData.text+`</span>
                </div>
                <ul class="tab-head-item-wrap fr">`;
        for(var i=0;i<floorData.tabs.length;i++){
            html+=`<li class="fl"><a href="javascript:;" class="tab-head-item">`+floorData.tabs[i]+`</a></li>`;
            if(i!==floorData.tabs.length-1){
                html+=`<li class="fl tab-head-item-divider text-hidden">分割線</li>`;
            }
        }

        html+=`</ul>
            </div>`;

        return html;
    }

    //建立floor體
    function buildFloorBody(floorData){
        var html="";
        html+=`<div class="tab-body">`;
        for(var i=0;i<floorData.tabs.length;i++){
            html+=`<ul class="tab-body-panel">`;

            for(var j=0;j<floorData.items[i].length;j++){
                html+=`<li class="tab-body-panel-item fl">
                        <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/loading.gif" class="floor-img" data-src="../img/floor/`+floorData.num+`/`+(i+1)+`/`+(j+1)+`.png"></a></p>
                        <p class="tab-body-panel-item-name">`+floorData.items[i][j].name+`</p>
                        <p class="tab-body-panel-item-price">`+floorData.items[i][j].price+`</p>
                    </li>`;
            }

            html+=`</ul>`;
        }
        html+=`</div>`;

        return html;
    }

    //是否在可視區內
    function isVisible(floorData){
        //性能優化：將固定的值如樓層距離網頁頂端的距離和樓層的高度存入floorData，不在此每次執行
        // 視口的高度+視口滾過的距離 大於 元素距離網頁頂部的距離（不然元素頂部在視口下面）
        // 而且
        // 視口滾過的距離 小於 元素滾過的距離+元素高度（不然元素底部在視口上面）
        return ($(window).height()+$(window).scrollTop()>floorData.offsetTop) && ($(window).scrollTop()<floorData.offsetTop+floorData.height);
    }

    //展現樓層
    function showFloor(){
        $(".floor").each(function(index,elem){//each的第一個參數默認是索引
            //注意第二個參數不是jQuery對象，轉對象須要包裝
            if(isVisible(floorData[index])){
                //floor的父元素觸發事件
                $(document).trigger("floor-show",[index,elem]);
            }
        });
    }

    $(window).on("scroll resize",$floor.showFloor=function(){
        clearTimeout($floor.timer);
        //開定時器稀釋事件流，優化性能
        $floor.timer=setTimeout(showFloor,250);
    });

    //tab監聽事件
    $floor.on("floor-loadItems",function(e,i,elem,success){
        loadImgs($(elem).find(".floor-img"),success,function($img,url){
            $img.attr("src","../img/floor.placeholder.png");
        });
    });

    //樓層監聽事件
    $(document).on("floors-loadItems",function(e,i,elem,success){
        var html=buildFloor(floorData[i]),
            $elem=$(elem);

        success();

        //模擬線上延遲
        setTimeout(function(){
            $elem.html(html);

            //延遲加載tab
            loadUtil({
                $container:$elem,
                totalItemNum:$elem.find(".floor-img").length,
                triggerEvent:"tab-show",
                id:"floor",
            });

            //激活tab選項卡
            $elem.Tab({
                event:"mouseenter",//click
                css3:false,
                js:false,
                animation:"fade",
                activeIdx:0,
                interval:0,
                delay:0
            });
        },1000);
    });

    //樓層加載結束監聽事件
    $(document).on("floors-itemsLoaded",function(){
        $(window).off("scroll resize",$floor.showFloor);
    });

    //延遲加載樓層
    loadUtil({
        $container:$(document),
        totalItemNum:$floor.length,
        triggerEvent:"floor-show",//tab-show
        id:"floors",//floor
    });
    
    showFloor();

//elevator
    function whichFloor(){
        var num;

        $floor.each(function(index,elem){
            
            num=index;
            //$(window).height()/2表示在樓層的1/2位置便可出現
            if($(window).scrollTop()+$(window).height()/2<floorData[index].offsetTop){
                num=index-1;
                return false;
            }
            
        });
        return num;
    }

    var elevator=$("#elevator"),
        eleItems=elevator.find(".elevator-item");
    //setElevator
    function setElevator(){
        var num=whichFloor();        

        if(num<0){
            elevator.fadeOut();
        }else{
            elevator.fadeIn();
            eleItems.removeClass("elevator-item-active");
            eleItems.eq(num).addClass("elevator-item-active");
        }
    }
    setElevator();

    var eleTimer=null;
    $(window).on("scroll resize",function(){
        clearTimeout(eleTimer);
        eleTimer=setTimeout(setElevator,250);
    });

    //事件代理抵達指定樓層
    elevator.on("click",".elevator-item",function(){
        $("html,body").animate({
            // $(this).index()獲取當前點擊的項的索引
            scrollTop:floorData[$(this).index()].offsetTop
        })
    })


})(jQuery);

相關標籤/搜索

每日一句

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