zoukankan      html  css  js  c++  java
  • 仿百度地图上拉下滑抽屉盒

    5640239-53fbb45c294debac.png
    原型图

    需求:上拉导航条的时候,会加载出具体的数据信息;
    上拉的位置高度由这些信息的条数决定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title></title>
    <style>* {
          margin: 0;
          padding: 0;
          list-style: none;
    }
    html,
    body {
           100%;
          height: 100%;
          overflow:hidden
    }
    a {
          text-decoration: none;
    }
    body {
          position: relative;
    }
    .div2 {
          position: absolute;
           100%;
          background: #fff;
    }
    .downNav {
    }
    .downNav ul {}
    .downNav ul li {
          list-style: none;
          height: 3rem;
          border: 1px solid #CCCCCC;
          line-height: 3rem;
          border-top: none;
    }
    .downNav ul li span {
          display: inline-block;
          text-align: center;
    }
    .downNav ul li span:first-child {
           12%;
    }
    .downNav ul li span:nth-child(2) {
           25%;
    }
    .downNav ul li span:nth-child(3) {
           48%;
    }
    .downNav ul li span:nth-child(4) {
           2%;
    }
    .down {
          
          position: relative;
          border: 1px solid #F0F1F1;
          border-right: none;
           100%;
    }
    .site {
          margin: 0 0 0 1rem;
          font-size: 24px;
          line-height: 71px;
    }
    .details {
          margin: 0 0 0 1rem;
          margin-bottom: 23px;
    }
    .details span {
          margin: 0 10px 0 0;
    }
    .walk {
           80px;
          height: 80px;
          border-radius: 50px;
          background: #3487ef;
          text-align: center;
          line-height: 14px;
          position: absolute;
          right: 18px;
          bottom: 78px;
    }
    .walk img {
          margin-top: 11px;
    }
    .walk p {
          color: #FFFFFF;
    }</style>
    </head>
    <body>
            <div id="div2" class="div2">
                <div class="wrap">
                      <div class="down">
                                  <div class="site">光大会展中心F座2201</div>
                                  <div class="details"><span>198m</span>|<span style="margin-left:10px;">漕宝路86号光大会展中心f座2201</span></div>
                                  <div class="walk">
                                        <img src="img/walk.png" alt="行走" />
                                        <p>到这去</p>
                                  </div>
                            </div>
                      <div class="downNav">
                            <ul>
                                        <li>
                                              <span>姓名</span>
                                              <span>联系电话</span>
                                              <span>邮箱</span>
                                        </li>
                                        
                                        <li>
                                              <span>王婷</span>
                                              <span>152104</span>
                                              <span>1357097</span>
                                              <span><a  href="form.html"  >></a></span>
                                        </li>
                                        <li>
                                              <span>王婷</span>
                                              <span>152104</span>
                                              <span>1357097</span>
                                              <span><a  href="form.html"  >></a></span>
                                        </li>
                                        
                                        <li>
                                              <span>王婷</span>
                                              <span>152104</span>
                                              <span>1357097</span>
                                              <span><a  href="form.html"  >></a></span>
                                        </li>
                                        <li>
                                              <span>王婷</span>
                                              <span>152104</span>
                                              <span>1357097</span>
                                              <span><a  href="form.html"  >></a></span>
                                        </li>
                                  </ul>
                                  <div class="dw"></div>
                            </div>
                      </div>
            </div>
    </body>
    <script type="text/javascript" charset="utf-8" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js";></script> 
    <script>
          $(function() {          
          var isdrag = false;
          var NowTop = 0,
                flag   = true,
                h = $(".wrap").height(),
                h1 = 0,
                h2 = $(".div2").position().top,
                moveY = 0,
                toTop = 0,
                disEndY=0,
                disY;
          var oDiv2 = document.getElementById("div2");
          oDiv2.addEventListener('touchstart', thismousedown);
          oDiv2.addEventListener('touchend', thismouseup);
          oDiv2.addEventListener('touchmove', thismousemove);
          $(oDiv2).css("top",($("body").height()-120))
          function thismousedown(e) {
    //          debugger
                isdrag = true;
                disY = e.touches[0].pageY;
          if((disY-disEndY)>0){               
                      if(h>$("body").height()){
                            moveY = $("body").height();
                            h-=$("body").height();
                      }else if(h<$("body").height()&&h>0){
                            moveY = h;
                            h = $(".wrap").height();
                      }
          }
                return false;
          }
          function thismousemove(e) {
                
                var h=$(".wrap").height()
                if(isdrag) {
                      var x = e.touches[0].pageY - disY;
                      //向下滑动
                      if((e.touches[0].pageY - disY) > 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
                            if(Math.abs($(".div2").position().top-h2)>$("body").height()){
                                  h1=$("body").height();
                                  $(oDiv2).stop().animate({
                                        top: "+="+h1+"px"
                                  }, 1000)
                            }else{
                                  $(oDiv2).stop().animate({
                                        top: ($("body").height()-120)+"px"
                                  }, 1000)
                            }
                            flag=true
                            return false;
                      }
                      //           向上滑动
                      if((e.touches[0].pageY - disY) < 0 && Math.abs(e.touches[0].pageY - disY) < 100) {
                            if(flag){
                                  $(oDiv2).stop().animate({
                                        top: "-="+moveY+"px"
                                  }, 1000)
                                  if(moveY<$("body").height()){
                                        flag=false
                                        h = $(".wrap").height();
                                  }
                            }                       
                            return false;
                      }
                }
          }
          function thismouseup(e) {
                isdrag = false;
          };
    });</script>
    </html>
    

    原文作者:祈澈姑娘
    技术博客:https://www.jianshu.com/u/05f416aefbe1

    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

    文末福利:关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源200G干货大全。公众号回复“1”,拉你进程序员技术讨论群

  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/ting6/p/9725793.html
Copyright © 2011-2022 走看看