ClassContent/历届学生/font-end-nine/项目练习/学生项目/张婷/作业/手机端作业/22.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../rem.js"></script>
    <link rel="stylesheet" href="../公共css/clear.css">
    <link rel="stylesheet" href="../公共css/public.css">
    <link rel="stylesheet" href="./css/22.css">
</head>

<body>
    <div class="header">
        <img src="../img/22/返回.png" alt="">
        <span>填写订单</span>
        <div></div>
    </div>
    <div class="content">
        <div class="shuaxin">
            <img src="../img/64/朋友圈.png" alt="">
        </div>
        <div class="address">
            <div class="add_l">
                <div class="add_up">
                    <span class="name">张晓明</span>
                    <span>186****0019</span>
                </div>
                <div class="add_down">上海市黄浦区中山南路128号千古美城1楼1210室</div>
            </div>
            <img src="../img/22/-e-右.png" alt="">
        </div>
        <div class="select">
            <span>选择支付方式</span>
            <div class="pay">
                <span>在线支付</span>
                <img src="../img/22/三个点.png" alt="">
            </div>
        </div>
        <ul id="goodsBox">
            <li class="goods">
                <div class="goods_title">
                    <img class="l" src="../img/22/矢量智能对象.png" alt="">
                    <span>路易斯女装旗舰店</span>
                    <img class="r" src="../img/22/-e-右.png" alt="">
                </div>
                <ul>
                    <li class="information">
                        <img src="../img/22/产品图.png" alt="">
                        <div class="des">
                            <p>真丝连衣裙2019春夏新款
                                杭州大牌气质修……</p>
                            <div class="up">
                                <span>颜色：黑白</span>
                                <span>尺码：L</span>
                            </div>
                            <div class="down">
                                <div class="number">
                                    ￥<span class="one">160</span>
                                    <span class="two">.00</span>
                                </div>
                                <div class="amount">X1</div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="remarkes">
                    <p class="three">订单备注</p>
                    <p class="four">有什么想对商家留言的可以在这里说</p>
                </div>
                <div class="cost">
                    <div class="cost_up">
                        <p>优惠抵用</p>
                        <span>-￥5</span>
                    </div>
                    <div class="cost_down">
                        <p>快递费用</p>
                        <span>免费包邮</span>
                    </div>
                </div>
                <div class="money">
                    <p>商品金额</p>
                    <span>￥155.00</span>
                </div>
            </li>
            <li class="goods">
                <div class="goods_title">
                    <img class="l" src="../img/22/矢量智能对象.png" alt="">
                    <span>路易斯女装旗舰店</span>
                    <img class="r" src="../img/22/-e-右.png" alt="">
                </div>
                <ul>
                    <li class="information">
                        <img src="../img/22/产品图.png" alt="">
                        <div class="des">
                            <p>真丝连衣裙2019春夏新款
                                杭州大牌气质修……</p>
                            <div class="up">
                                <span>颜色：黑白</span>
                                <span>尺码：L</span>
                            </div>
                            <div class="down">
                                <div class="number">
                                    ￥<span class="one">160</span>
                                    <span class="two">.00</span>
                                </div>
                                <div class="amount">X1</div>
                            </div>
                        </div>
                    </li>
                    <li class="information">
                        <img src="../img/22/产品图.png" alt="">
                        <div class="des">
                            <p>真丝连衣裙2019春夏新款
                                杭州大牌气质修……</p>
                            <div class="up">
                                <span>颜色：黑白</span>
                                <span>尺码：L</span>
                            </div>
                            <div class="down">
                                <div class="number">
                                    ￥<span class="one">160</span>
                                    <span class="two">.00</span>
                                </div>
                                <div class="amount">X1</div>
                            </div>
                        </div>
                    </li>
                </ul>


                <div class="remarkes">
                    <p class="three">订单备注</p>
                    <p class="four">有什么想对商家留言的可以在这里说</p>
                </div>
                <div class="cost">
                    <div class="cost_up">
                        <p>优惠抵用</p>
                        <span>-￥5</span>
                    </div>
                    <div class="cost_down">
                        <p>快递费用</p>
                        <span>免费包邮</span>
                    </div>
                </div>
                <div class="money">
                    <p>商品金额</p>
                    <span>￥315.00</span>
                </div>
            </li> -->
        </ul>

    </div>
    <div class="footer">
        <div class="text">
            <p>共3件，</p>
            <p>合计：</p>
            <p>¥<span>5999.00</span></p>
        </div>
        <div class="button">结算(2)</div>
    </div>
</body>
<script>

    function $(className) {
        var nodeList = document.querySelectorAll(className)
        if (nodeList.length > 1) {
            return nodeList
        } else {
            return document.querySelector(className)
        }
    }



    var content =$('.content')



    var startY = 0
    var distanceY = 0

    //    获取开始的y值
       content.addEventListener('touchstart',function(e){ 
            startY = event.targetTouches[0].screenY;
            // console.log(startY);
        })


    // 监听移动实现跟手动
        content.addEventListener('touchmove', function(e){
            var moveY = event.changedTouches[0].screenY;
            var distanceY = moveY - startY
            if(distanceY >30 && distanceY< 100){
                content.style.transform = `translateY(${distanceY}PX)`
            }

        })




    //    获取结束的y值
        content.addEventListener('touchend', function(e){

            var endY = event.changedTouches[0].screenY;
           
            if(endY > startY){
                var distanceY = endY - startY
               
                if(distanceY > 0 && distanceY < 100){
                    content.style.transform = `translateY(0PX)`
                }
                else if(distanceY > 100){
                    content.style.transform = `translateY(100PX)`
                    setTimeout(() =>{
                        content.style.transform = `translateY(0PX)`
                    },500)

                }
            }
            distance = 0
        })




</script>

</html>