HTML类似美团关联列表 左右联动列表

7 篇文章 0 订阅
3 篇文章 0 订阅

废话不多说,直接上原理与代码。

1.首先布局,左右联动即左右布局。

左边导航用 宽度限制+高度限制+浮动+绝对定位,右边 宽度限制+浮动

 .divNav{
                width: 19%;float: left;background: #F6F9FE;
                scrolling:no;
                position: fixed;
                left: 0;
                bottom: 0;
                height: 100%;
                z-index: 999;
            }
            .divContent{
                width: 81%;float: right;background: #FFFFFF;
            }
<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="referrer" content="no-referrer">
        <title>京回收-卡券转让</title> 
    </head>
    <style>
        .divNav{
            width: 19%;float: left;background: #F6F9FE;
            scrolling:no;
            position: fixed;
            left: 0;
            bottom: 0;
            height: 100%;
            z-index: 999;
        }
        .divContent{
            width: 81%;float: right;background: #FFFFFF;
        }
    </style>
    <body>
        <div class="divNav">
        </div>
        <div class="divContent" style="">
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </body>
</html>

效果图:

 2.右边列表内容填充,懒得说了我特喵的一个后端,写前端代码一次性说完思路,等下上完整代码,自己去上下而求索。

右边列表自己去控制下高度和宽度,左边做个间隔,然后OBJK了;布局就完成了,只要上JS了。

3.JS思路:有规律的控制左右标签。获取右边标签距离顶部距离,如果高度在某一个区域则显示左边对应标签。我这边显示的是 右边高度0-100 的,后面请自行依据页面更改值。

4.其实这还不算完善,(这页代码只有右边单个列表够多才不需要匹配左边背景色)还需要匹配到左边的高度 才会好看一点

<html lang="zh-cn" style="font-size: 55.2px !important;"><head>
        <meta charset="utf-8">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="referrer" content="no-referrer">
        <title>京回收-卡券转让</title> 
        <link data-n-head="true" rel="icon" type="image/x-icon" href="//static.m.jhuishou.com/Framework/img/favicon.ico">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/awesome/css/font-awesome.min.css" rel="stylesheet">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/layui/css/layui.mobile.css" rel="stylesheet">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/plugs/layui/css/modules/layer/default/layer.css" rel="stylesheet">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/theme/css/console.css" rel="stylesheet">
        <link href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/theme/css/animate.css" rel="stylesheet">
        <link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/reset.css">
        <link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/main.css">
        <link rel="stylesheet" href="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/css/swiper.min.css">
        <link rel="stylesheet" type="text/css" href="//static.m.jhuishou.com/SaleCard/Framework/wechat/css/common.css">

        <script src="//static.m.jhuishou.com/SaleCard/Framework/wechat/js/jquery3.3.1.js"></script>
        <script src="//static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/js/main.js"></script>
        <script type="text/javascript">
            function cssbb(id) {
                $('.libbc,.bbc').css('font-size', '14px');
                $('.libbc,.bbc').css('background', '#F6F9FE');
                $('#bbc' + id).css('font-size', '16px');
                $('#bbc' + id).css('background', '#FFFFFF');
                $('#libbc' + id).css('background', '#FFFFFF');
                kk = id;
            }

            function set_auto_time() {
                var stop = $('#jkl' + kk).offset().top;//新一轮循环 以前标签标注位置
                for (var i = fiel.length; i > 0; i--) {
                    var top = $('#jkl' + fiel[i - 1]).offset().top;//当前标签位置
        //当前标签位置小于以前位置,且不是同一标签
                    if (kk != fiel[i - 1] && top < 100 && top > 0) {
                        kk = fiel[i - 1];
                        cssbb(fiel[i - 1]);
                        console.log('fiel_start:' + fiel_start + ' fiel[i-1]:' + fiel[i - 1] + ' top:' + top + ' kk:' + kk);
                        break;
                    } else if (kk == '0') {
                        console.log('fiel[i-1] : ' + fiel[i - 1] + ' top:' + top);
                    }
                }
                setTimeout('set_auto_time();', 200);
            }

            var fiel = ["1", "2", "4", "5", "6", "7", "8"];
            var jkl_height = ["1", "2", "4", "5", "6", "7", "8"];//标签初始位置
            var top_height = ["1", "2", "4", "5", "6", "7", "8"];//标签高度
            var fiel_start;
            var kk = "1";//默认选择第一个标签
            jQuery(function () {
                console.log(fiel);
                fiel_start = $('#jkl' + fiel['0']).offset().top;
                for (var i = fiel.length; i > 0; i--) {
                    top_height[fiel[i - 1]] = $('#jkl' + fiel[i - 1]).offset().top;//当前标签位置
                    jkl_height[fiel[i - 1]] = $('#jkll' + fiel[i - 1]).height();//当前容器高度
                }
                console.log(top_height);
                console.log(jkl_height);
                set_auto_time();
            })


        </script>


    </head>

    <style>
        html,body{
            width: 100%;
            height: 100%;
            overflow-x:hidden;
        }
        .content{ width:7.5rem;box-sizing: border-box; padding-bottom: 0rem;background: #FFFFFF}

        .swiper-wrapper{
            -webkit-overflow-scrolling: touch;
        }
        .swiper-slid{
            -webkit-overflow-scrolling: touch;
        }
        /*导航*/
        /*底部tabs*/
        .gallery-top {
            height: 100%;
            width: 7.5rem;
        }
        .gallery-top .swiper-slide{
            height: 100%;
            width: 100% !important;
            overflow-y: auto;
        }
        .gallery-top .swiper-slide .ka_list{
            width:7.05rem;height:2rem;   position: relative;margin: 0rem auto 0.35rem;position: relative;
        }
        .gallery-top .swiper-slide .ka_list:first-child{  margin-top: 0.35rem; }
        .gallery-top .swiper-slide .ka_list .bg_img{  width:7.05rem;height:1.92rem;border-radius: 0.1rem;background:#47bdb6;  }
        .gallery-top .swiper-slide .ka_list .ka_box{
            width: 7.20rem;
            height: 1.92rem;
            padding: 0.46rem 0.3rem 0.46rem;
            display: flex;
            position: absolute;
            left: 0rem;
            top: 0rem;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .left{
            width: 1rem; height: 1rem;margin-right: 0.3rem;
            min-width: 1rem;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .left img{ width:1rem;height:1rem;border-radius: 100%; }
        .gallery-top .swiper-slide .ka_list .ka_box .center{
            width: 4.72rem;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .center h4{
            width: 100%;
            height: 0.58rem;
            line-height: 0.58rem;
            font-size: 0.3rem;
            color: #fff;
            white-space: nowrap;  overflow: hidden;  text-overflow:ellipsis;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .center p{
            width: 100%;height: 0.42rem;line-height:0.42rem; font-size: 0.22rem;     color: #f6f9eb;  opacity: 0.6;white-space: nowrap;  overflow: hidden;  text-overflow:ellipsis;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .right{
            width: 0.5rem;text-align: right;
            min-width: 0.5rem;
        }
        .gallery-top .swiper-slide .ka_list .ka_box .right img{ width: 0.32rem;  height: 0.32rem;  display: inline-block;  margin-top: 0.42rem;}

        /*导航*/
        /*底部tabs*/
        .gallery-top_01 {
            height: 100%;
            width: 7.5rem;
        }
        .gallery-top_01 .swiper-slide{
            height: 100%;
            width: 100% !important;
            overflow-y: auto;
        }
        .gallery-top_01 .swiper-slide .ka_list{
            width:7.05rem;height:2rem;   position: relative;margin: 0rem auto 0.35rem;position: relative;
        }
        .gallery-top_01 .swiper-slide .ka_list:first-child{  margin-top: 0.35rem; }
        .gallery-top_01 .swiper-slide .ka_list .bg_img{  width:7.05rem;height:1.92rem;border-radius: 0.1rem;background:#47bdb6;  }
        .gallery-top_01 .swiper-slide .ka_list .ka_box{
            width: 7.20rem;
            height: 1.92rem;
            padding: 0.46rem 0.3rem 0.46rem;
            display: flex;
            position: absolute;
            left: 0rem;
            top: 0rem;
        }
        .gallery-top_01 .swiper-slide .ka_list .ka_box .left{ width: 1rem; height: 1rem;margin-right: 0.3rem;}
        .gallery-top_01 .swiper-slide .ka_list .ka_box .left img{ width:1rem;height:1rem;border-radius: 100%; }
        .gallery-top_01 .swiper-slide .ka_list .ka_box .center{     width: 4.72rem; }
        .gallery-top_01 .swiper-slide .ka_list .ka_box .center h4{
            width: 100%;
            height: 0.58rem;
            line-height: 0.58rem;
            font-size: 0.3rem;
            color: #fff;
            white-space: nowrap;  overflow: hidden;  text-overflow:ellipsis;
        }
        .gallery-top_01 .swiper-slide .ka_list .ka_box .center p{
            width: 100%;height: 0.42rem;line-height:0.42rem; font-size: 0.22rem;     color: #f6f9eb;  opacity: 0.6;white-space: nowrap;  overflow: hidden;  text-overflow:ellipsis;
        }
        .gallery-top_01 .swiper-slide .ka_list .ka_box .right{ width: 0.5rem;text-align: right;}
        .gallery-top_01 .swiper-slide .ka_list .ka_box .right img{ width: 0.32rem;  height: 0.32rem;  display: inline-block;  margin-top: 0.42rem;}
        /*积分兑*/
        /*tab头*/
        .nav_top_list{
            width: 6rem;
            margin: 0rem auto;
            display: flex;
            margin-top: 0.2rem;
        }
        .nav_top_list dd{
            width: 50%;
            position: relative;
        }
        .nav_top_list dd .rigth_border{
            position: absolute;
            top:50%;
            right: -0.01rem;
            border-right: 1px solid #dedede;
            height: 0.48rem;
            background: #BBBBBB;
            margin-top: -0.24rem;
        }
        .nav_top_list dd span{
            width: 1.72rem;
            height: 0.6rem;
            display: block;
            text-align: center;
            line-height: 0.6rem;
            color: #010101;
            margin: 0rem auto;
        }
        .nav_top_list dd.cur span{
            background: #00C2B7;
            color: #fff;
            border-radius: 0.6rem;
        }
        /*tab头*/
        .bg_list_cahnge{
            width: 3.7rem;
            background: #fff;
            position: relative;
            height: 0.6rem;
            text-align: left;
            border-radius: 0.6rem;
            margin: 0rem auto;
            margin-top: 0.2rem;
        }
        .nav_top_list_01{
            width: 3.7rem;
            margin: 0rem auto;
            position: absolute;
            left: 0rem;
            top: 0rem;
            border-radius: 0.6rem;
            display: flex;

        }
        .nav_top_list_01 dd{
            flex: 1;
            position: relative;
            height: 0.6rem;
            display: block;
            text-align: center;
            line-height: 0.6rem;
            border-radius: 0.6rem;
            color: #010101;
        }
        .nav_top_list_01 dd.cur{
            width: 1.94rem;
            color: #fff;
            /*background: #00C2B7;*/
            background: #5bb7f8;
        }


        .bbj{
            width: 83px;
            height: 100%;
            text-align: center;
            border-radius: 0px 0px 0px 0px;
            opacity: 1;

        }
        .bbj li{
            font-size: 16px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #222222;
            line-height: 16px;
            -webkit-background-clip: text;
        }

        .divNav{
            width: 19%;float: left;background: #F6F9FE;
            scrolling:no;
            position: fixed;
            left: 0;
            bottom: 0;
            height: 100%;
            z-index: 999;
        }
        .divContent{
            width: 81%;float: right;background: #FFFFFF;
        }
        a,a:link,a:visited,a:active,a:hover{
            text-decoration: none;
        }
        .fiel{
            /*width: 80%;*/
            border-top: 2px #EEEEEE solid;
            margin-top: 0.3rem;
            padding-bottom: 10px;
        }
        .fiel legend{
            text-align: center;
            font-size: 15px;
        }
        .cdiv{
            float: left;
            width: 33%;
            text-align: center;
            padding-top: 0.3rem;
        }
        .cdiv img{
            width: 80%;
            width: 0.5rem;
            height:  0.5rem;
        }
        .bbj li a{
            width: 48px;
            height: 16px;
            font-size: 14px;
            font-family: PingFang SC-Bold, PingFang SC;
            color: #222222;
            /*line-height: 16px;*/
        }
        .bbj li a span{
            width: 100%;
        }
        .bbc{
            width: 100%;
            margin-top: -0.5rem;
        }

    </style>
    <div class="content" style="padding-top:0px">
        <div class="divNav">
            <ul class="bbj" style="">
                <li class="libbc" id="libbc1" onclick="cssbb('1');" style=" vertical-align: middle;padding-top: 0.8rem;font-size: 16px;background: #FFFFFF;font-weight: bold;">
                    <a href="#bbj1">
                        <div class="bbc" id="bbc1" style="font-size: 16px;background: #FFFFFF;font-weight: bold;">
                            话费卡                            </div></a>
                </li>
                <li class="libbc" id="libbc2" onclick="cssbb('2');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj2">
                        <div class="bbc" id="bbc2" style="">
                            加油卡                            </div></a>
                </li>
                <li class="libbc" id="libbc4" onclick="cssbb('4');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj4">
                        <div class="bbc" id="bbc4" style="">
                            电商卡                            </div></a>
                </li>
                <li class="libbc" id="libbc5" onclick="cssbb('5');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj5">
                        <div class="bbc" id="bbc5" style="">
                            商超卡                            </div></a>
                </li>
                <li class="libbc" id="libbc6" onclick="cssbb('6');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj6">
                        <div class="bbc" id="bbc6" style="">
                            出行券                            </div></a>
                </li>
                <li class="libbc" id="libbc7" onclick="cssbb('7');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj7">
                        <div class="bbc" id="bbc7" style="">
                            美食券                            </div></a>
                </li>
                <li class="libbc" id="libbc8" onclick="cssbb('8');" style=" vertical-align: middle;padding-top: 0.8rem;">
                    <a href="#bbj8">
                        <div class="bbc" id="bbc8" style="">
                            影音券                            </div></a>
                </li>
            </ul>
        </div>
        <div class="divContent" style="">
            <a name="bbj1" id="jkl1" style=" background: #FFFFFF;">
                <fieldset class="fiel" id="jkll1">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        话费卡                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651293484other10.png?t=1651293484"><br>
                        中国移动                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294641other9.png?t=1651294641"><br>
                        中国联通                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294659other7.png?t=1651294659"><br>
                        中国电信                        </div>
                </fieldset>
            </a>
            <a name="bbj2" id="jkl2" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll2">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        加油卡                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294719other1.png?t=1651294719"><br>
                        中石化充值卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294761other3.png?t=1651294761"><br>
                        中石油充值卡                        </div>
                </fieldset>
            </a>
            <a name="bbj4" id="jkl4" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll4">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        电商卡                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294870other1.png?t=1651294870"><br>
                        京东e卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294902other1.png?t=1651294902"><br>
                        苏宁易购                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294919other2.png?t=1651294919"><br>
                        壹钱包                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294938other10.png?t=1651294938"><br>
                        万里通                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294955other10.png?t=1651294955"><br>
                        天猫超市卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651294993other2.png?t=1651294993"><br>
                        天猫购物券                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295050other10.png?t=1651295050"><br>
                        每日优鲜                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295067other7.png?t=1651295067"><br>
                        天猫元宝                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295092other5.png?t=1651295092"><br>
                        美团礼品卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295115other8.png?t=1651295115"><br>
                        网易严选                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295134other6.png?t=1651295134"><br>
                        盒马鲜生                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295150other2.png?t=1651295150"><br>
                        瑞祥商联卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295178other8.png?t=1651295178"><br>
                        大众e通卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295194other1.png?t=1651295194"><br>
                        付费通卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295234other1.png?t=1651295234"><br>
                        唯品会                        </div>
                </fieldset>
            </a>
            <a name="bbj5" id="jkl5" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll5">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        商超卡                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295270other7.png?t=1651295270"><br>
                        沃尔玛                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295287other2.png?t=1651295287"><br>
                        百联ok卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295303other2.png?t=1651295304"><br>
                        家乐福礼品卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295332other4.png?t=1651295332"><br>
                        苏果超市                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295349other9.png?t=1651295349"><br>
                        山东一卡通                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295371other2.png?t=1651295371"><br>
                        永辉超市卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295520other4.png?t=1651295520"><br>
                        华润万家                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295540other6.png?t=1651295540"><br>
                        福卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295564other10.png?t=1651295564"><br>
                        大润发                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295584other5.png?t=1651295584"><br>
                        中欣卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295623other1.png?t=1651295623"><br>
                        天虹                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295644other2.png?t=1651295644"><br>
                        美通卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295680other6.png?t=1651295680"><br>
                        中银通支付卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295711other3.png?t=1651295711"><br>
                        资和信商通卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295726other3.png?t=1651295726"><br>
                        和信通                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295741other2.png?t=1651295741"><br>
                        飞银彩虹卡                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651295761other10.png?t=1651295761"><br>
                        万商卡                        </div>
                </fieldset>
            </a>
            <a name="bbj6" id="jkl6" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll6">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        出行券                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296021other1.png?t=1651296021"><br>
                        携程任我行                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296047other8.png?t=1651296047"><br>
                        滴滴出行                        </div>
                </fieldset>
            </a>
            <a name="bbj7" id="jkl7" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll7">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        美食券                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                </fieldset>
            </a>
            <a name="bbj8" id="jkl8" style=" background: #FFFFFF;padding-top: 0.8rem;">
                <fieldset class="fiel" id="jkll8">
                    <legend>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        影音券                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    </legend>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296110other4.png?t=1651296110"><br>
                        爱奇艺                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296133other4.png?t=1651296133"><br>
                        腾讯视频                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296161other3.png?t=1651296161"><br>
                        优酷视频                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296204other4.png?t=1651296204"><br>
                        芒果TV                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296222other10.png?t=1651296223"><br>
                        搜狐视频                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296260other10.png?t=1651296260"><br>
                        淘票票                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296278other2.png?t=1651296278"><br>
                        猫眼                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296317other1.png?t=1651296317"><br>
                        QQ音乐                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296351other6.png?t=1651296351"><br>
                        喜马拉雅                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296377other5.png?t=1651296377"><br>
                        网易云                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296393other10.png?t=1651296393"><br>
                        vaudeville网盘                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296406other3.png?t=1651296406"><br>
                        哔哩哔哩                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296451other10.png?t=1651296451"><br>
                        饿了么                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296478other3.png?t=1651296478"><br>
                        京东电影                        </div>
                    <div class="cdiv">
                        <img src="https://static.m.jhuishou.com/SaleCard/Framework/lipin1/static/public/img/product/other1651296505other2.png?t=1651296505"><br>
                        百度文库                        </div>
                </fieldset>
            </a>
            <br>
            <br>
            <br>
            <br>
            <br>
        </div>


    </div></body></html>

效果图:

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现类似美团菜单滑动的效果左右联动,可以使用一些现成的 JavaScript 插件或者自己编写 JavaScript 代码实现。 其中,比较常用的插件是 Swiper 和 Slick。这两个插件都支持左右联动,可以根据具体需求进行配置和使用。 如果你想自己编写 JavaScript 代码实现左右联动,可以通过监听滚动事件来实现。首先需要获取到左右两个滚动容器的 DOM 元素,并且监听它们的滚动事件。当其中一个滚动容器滚动时,计算它的滚动位置,然后将另一个滚动容器滚动到对应的位置即可。 具体实现方式可以参考以下示例代码: ```html <div class="container"> <div class="left-scroll"> <!-- 左侧滚动容器的内容 --> </div> <div class="right-scroll"> <!-- 右侧滚动容器的内容 --> </div> </div> <script> const container = document.querySelector('.container'); const leftScroll = document.querySelector('.left-scroll'); const rightScroll = document.querySelector('.right-scroll'); leftScroll.addEventListener('scroll', () => { const scrollLeft = leftScroll.scrollLeft; rightScroll.scrollTo(scrollLeft, 0); }); rightScroll.addEventListener('scroll', () => { const scrollLeft = rightScroll.scrollLeft; leftScroll.scrollTo(scrollLeft, 0); }); </script> ``` 以上代码中,通过监听左侧和右侧滚动容器的滚动事件,实现左右联动效果。当左侧滚动容器滚动时,右侧滚动容器也会滚动到对应的位置;当右侧滚动容器滚动时,左侧滚动容器也会滚动到对应的位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值