jQuery（四）手机点餐demo

最新推荐文章于 2022-04-30 10:05:16 发布

We_jia

最新推荐文章于 2022-04-30 10:05:16 发布

阅读量1.4k

点赞数

分类专栏： jQuery 文章标签：手机点餐功能

本文链接：https://blog.csdn.net/We_jia/article/details/87973292

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果展示

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=300,maximum-scale=5.0,user-scalable=0">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .block {
            margin-top: 100px;
            width: 300px;
            height: 300px;
            border-bottom: 1px solid grey;
            border-top: 1px solid grey;
            box-sizing: border-box;
        }

        .menuLeft {
            width: 90px;
            height: 300px;
            float: left;
            border-right: 1px solid grey;
            box-sizing: border-box;
            overflow: hidden;
        }

        .menuRight {
            position: relative;
            width: 210px;
            height: 300px;
            float: left;
            overflow: hidden;
        }

        .menuUl {
            width: 100px;
            height: 300px;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .menuUl li {
            width: 90px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 12px;
            border-bottom: 1px solid grey;
            box-sizing: border-box;
        }

        .menudea {
            width: 220px;
            height: 300px;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        .menuchild {
            width: 210px;
            height: 300px;
            border-bottom: 1px solid silver;
            box-sizing: border-box;
        }

        .menuleftColor {
            background-color: #dbdbdb;
            color: red;
        }
    </style>
</head>
<body>
<div class="block">
    <div class="menuLeft">
        <ul class="menuUl">
            <li class="menuleftColor">热卖</li>
            <li>肉菜</li>
            <li>素菜</li>
            <li>酒水</li>
            <li>主食</li>
            <li>套餐1</li>
            <li>套餐2</li>
            <li>套餐3</li>
            <li>套餐4</li>
        </ul>
    </div>
    <div class="menuRight">
        <div class="menudea">
            <div class="menuchild">
                <p>热卖</p>
            </div>
            <div class="menuchild">
                <p>肉菜</p>
            </div>
            <div class="menuchild">
                <p>素菜</p>
            </div>
            <div class="menuchild">
                <p>酒水</p>
            </div>
            <div class="menuchild">
                <p>主食</p>
            </div>
            <div class="menuchild">
                <p>套餐1</p>
            </div>
            <div class="menuchild">
                <p>套餐2</p>
            </div>
            <div class="menuchild">
                <p>套餐3</p>
            </div>
            <div class="menuchild">
                <p>套餐4</p>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    $(".menuUl li").each(function (index) {
        //绑定自己的offsettop
        $(this).prop("data-myoffset-top", $(this).offset().top);
        //存储对应div元素的offsetTop
        var Htop = $(".menuchild").eq(index).offset().top;     //offset() 方法设置或返回被选元素相对于文档的偏移坐标。
        $(this).prop("data-offset-top", Htop);

        //每一个li的点击事件
        $(this).click(function () {
            $(".menuUl li").removeClass("menuleftColor");  //所有的li
            $(this).addClass("menuleftColor");
            var HoffsetTop = $(this).prop("data-offset-top") - $(".block").offset().top;
            /*   $(".menudea").scrollTop(HoffsetTop);  //   scrollTop是一个方法*/
            $(".menudea").animate({
                scrollTop: HoffsetTop
                //scrollTop() 方法设置或返回被选元素的垂直滚动条位置。
                //scrollTop值改变 会触发滚动条事件
            }, 300);
            //点击左边的li的时候移除右边的滚动条事件
            $(".menudea").unbind("scroll");
        });
    });

    //滚动事件
    //当用户滚动指定的元素时，会发生 scroll 事件
    $(".menudea").bind("scroll",function (){
        //索引
        var Stop = parseInt($(this).scrollTop() / 300);
        var s = $(".menuUl li").eq(Stop).prop("data-myoffset-top") - $(".block").offset().top;
        $(".menuUl").scrollTop(s);
        $(".menuUl li").removeClass("menuleftColor").eq(Stop).addClass("menuleftColor");
    });
</script>
</body>
</html>

We_jia

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery（四）手机点餐demo

效果展示全部代码&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;meta name="viewport" content
复制链接

扫一扫

专栏目录