首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >仿百度地图上拉下滑抽屉盒

仿百度地图上拉下滑抽屉盒

作者头像
王小婷
发布2018-06-04 14:44:24
8923
发布2018-06-04 14:44:24
举报
文章被收录于专栏:编程微刊编程微刊

原型图

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

<!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 {
      width: 100%;
      height: 100%;
      overflow:hidden
}
a {
      text-decoration: none;
}
body {
      position: relative;
}
.div2 {
      position: absolute;
      width: 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 {
      width: 12%;
}
.downNav ul li span:nth-child(2) {
      width: 25%;
}
.downNav ul li span:nth-child(3) {
      width: 48%;
}
.downNav ul li span:nth-child(4) {
      width: 2%;
}
.down {
      
      position: relative;
      border: 1px solid #F0F1F1;
      border-right: none;
      width: 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 {
      width: 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”,拉你进程序员技术讨论群

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.01.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档