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

jQuery 2020-11-07

效果图

floor.html

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

     2F一  3F ="floor"  4F  5F  elevator -->    
    ="elevator container" id="elevator"a href="javascript:;" class="elevator-item"span ="elevator-num">F1span="elevator-text">服饰a>F2>美妆>F3>手机>F4>家电>F5>数码script ="../js/jquery.js"></script="../js/transition.js"="../js/showhide.js"="../js/tab2.js"="../js/floor.js"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:
        -ms-transition:
        -o-transition:
        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{68px;
        border-bottom:1px solid #f01414;
    }
    .tab-head-title{22px;
    }
    .tab-head-title-num{
        display: inline-block;24px;
        border-radius:50%;
        background-color:#07111b;
        color:#fff;
        text-align: center;
        line-height:
        margin-right:10px;
    }
    .tab-head-title-name{
        font-size:20px;
        top:3px;
    }
    .tab-head-item-wrap{8px;62px;62px;
    }
    .tab-head-item{14px;    
        color:#93999f;16px;
    }
    .tab-head-item-active{#f01414;
        background:url(../img/floor-arrow.png) center bottom no-repeat;
    }
    .tab-head-item-divider{1px;#d9dde1;21px;
    .tab-body{466px;
    }
    .tab-body-panel{466px; none;
    }
    .tab-body-panel-item{200px;233px; center;
    }
    .tab-body-panel-item:hover{
        box-shadow:0 0 10px rgba(0,.2);
    }
    .tab-body-panel-item-pic{24px;
    }
    .tab-body-panel-item-name{23px;12px;#07111b;
    }
    .tab-body-panel-item-price{9px;#f01414;
    }

elevator
    .elevator{ fixed;
        left:-90px;
        margin-left:-640px;
        container宽度1200px,50%是-600px，再移动-40px左右的距离*/
    }
    .elevator-item{35px; block; 35px;#4d555d;
        border-top:1px solid #d9dde1;
    }
    .elevator-item:hover,.elevator-item-active{#f01414;
    }
    .elevator-num{

    }
    .elevator-text{
    .elevator-item:hover .elevator-num,.elevator-item-active .elevator-num{
    .elevator-item:hover .elevator-text,.elevator-item-active .elevator-text{ 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:"服装箱包"],offsetTop:$floor.eq(0).offset().top,height:$floor.eq(0).height(),items:[
                [
                    {
                        name:"匡威男棒球开衫外套2020"
                    },{
                        name:"匡威男棒球开衫外套2020"
                    }
                ],[
                    {
                        name:"匡威男棒球开衫外套2020"
                    }
                ]
            ]
        },{
            num:"2"1234
                    }
                ]
            ]
        }
    ];

    提前加载图片
     loadImg(url,success,fail){
        var image=new Image();

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

    按需加载图片
     loadImgs($imgs,fail){    
        $imgs.each((_,el){
            var $img=$(el);

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

    延迟加载
     loadUtil(options){
        var items={},loadedItemsNum=0nulloptions.$container,id=options.id,totalItemNum=options.totalItemNum,triggerEvent=options.triggerEvent;

        接收开始显示图片的消息
        $elem.on(triggerEvent,loadFn=(e,i,elem){

            if(items[i] !== "loaded"){
                触发开始加载图片的自定义事件
                $elem.trigger(id+"-loadItems",[i,elem,1)">(){
                    items[i]="loaded";
                    loadedItemsNum++;

                    if(loadedItemsNum===totalItemNum){
                        触发全部加载完毕的自定义事件
                        $elem.trigger(id+"-itemsLoaded");
                    }                    
                }]);                
            }        
        });
        绑定全部加载完毕的自定义事件
        $elem.on(id+"-itemsLoaded",1)">(e){
            清除事件
            $elem.off(triggerEvent,loadFn);
        });        
    }

    创建floor结构
     buildFloor(floorData){
        var html="";
        html+=`<div class="container">`;
        html+=buildFloorHead(floorData);
        html+=buildFloorBody(floorData);
        html+=`</div>`;

        return html;
    }

    创建floor头部
     buildFloorHead(floorData){
        ;
        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>`;

        创建floor体
     buildFloorBody(floorData){
        ;
        html+=`<div class="tab-body">){
            html+=`<ul class="tab-body-panel">`;

            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>`;

        是否在可视区内
     isVisible(floorData){
        性能优化：将固定的值如楼层距离网页顶端的距离和楼层的高度存入floorData，不在此每次执行
         视口的高度+视口滚过的距离 大于 元素距离网页顶部的距离（否则元素顶部在视口下面）
         并且
         视口滚过的距离 小于 元素滚过的距离+元素高度（否则元素底部在视口上面）
        return ($(window).height()+$(window).scrollTop()>floorData.offsetTop) && ($(window).scrollTop()<floorData.offsetTop+floorData.height);
    }

    展示楼层
     showFloor(){
        $(".floor").each(function(index,elem){each的第一个参数默认是索引
            注意第二个参数不是jQuery对象，转对象需要包装
            if(isVisible(floorData[index])){
                floor的父元素触发事件
                $(document).trigger("floor-show"(){
        clearTimeout($floor.timer);
        开定时器稀释事件流，优化性能
        $floor.timer=setTimeout(showFloor,250);
    });

    tab监听事件
    $floor.on("floor-loadItems",success){
        loadImgs($(elem).find(".floor-img"),1)">($img,url){
            $img.attr("src","../img/floor.placeholder.png");
        });
    });

    楼层监听事件
    $(document).on("floors-loadItems",success){
        var html=buildFloor(floorData[i]),1)">$(elem);

        success();

        模拟线上延迟
        setTimeout((){
            $elem.html(html);

            延迟加载tab
            loadUtil({
                $container:$elem,totalItemNum:$elem.find(".floor-img").length,triggerEvent:"tab-show"激活tab选项卡
            $elem.Tab({
                event:"mouseenter",1)">click
                css3:false"fade"0
            });
        },1000楼层加载结束监听事件
    $(document).on("floors-itemsLoaded",1)">(){
        $(window).off("scroll resize"延迟加载楼层
    loadUtil({
        $container:$(document),totalItemNum:$floor.length,triggerEvent:"floor-show",1)">tab-show
        id:"floors",1)">floor
    });
    
    showFloor();

elevator
     whichFloor(){
        var num;

        $floor.each((index,elem){
            
            num=index;
            $(window).height()/2表示在楼层的1/2位置即可出现
            if($(window).scrollTop()+$(window).height()/2<floorData[index].offsetTop){
                num=index-1;
                return ;
            }
            
        });
         num;
    }

    var elevator=$("#elevator"),eleItems=elevator.find(".elevator-item");
    setElevator
     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=;
    $(window).on("scroll resize",1)">(){
        clearTimeout(eleTimer);
        eleTimer=setTimeout(setElevator,1)">事件代理抵达指定楼层
    elevator.on("click",".elevator-item",1)">(){
        $("html,body").animate({
             $(this).index()获取当前点击的项的索引
            scrollTop:floorData[$(this).index()].offsetTop
        })
    })


})(jQuery);

 

相关文章

jq配合后端解决跨域
1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象（json对象）
JS 将form表单数据快速转化为object对象（json对象） jaymou...
jQuery的区别：$().click()和$(document).on('click','要选择的元素',function(){})的不同
jQuery的区别：$().click()和$(document).on(&#39;click...
jQuery插件之jquery.spinner数字智能增减插件
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...