zoukankan      html  css  js  c++  java

  • jQuery实现商品楼层和电梯功能

    效果图

    floor.html

    <!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  https://www.cnblogs.com/chenyingying0/p/12363689.html
    floor.css

    /*基本样式    */
    .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 https://www.cnblogs.com/chenyingying0/p/12363649.html
    showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
    tab2.js https://www.cnblogs.com/chenyingying0/p/12384972.html
    floor.js

    // 不要暴露在全局，使用匿名函数自执行
(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);
  • 相关阅读:
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    Apache Spark RDD（Resilient Distributed Datasets）论文
    Apache Spark 2.2.0 中文文档
    Apache Spark 2.2.0 中文文档
    【机器学习实战】第10章 K-Means（K-均值）聚类算法
    [译]flexbox全揭秘
  • 原文地址：https://www.cnblogs.com/chenyingying0/p/12404238.html
Copyright © 2011-2022 走看看