仿百度地圖上拉下滑抽屜盒

原型圖

需求:上拉導(dǎo)航條的時候因悲,會加載出具體的數(shù)據(jù)信息荸镊;
上拉的位置高度由這些信息的條數(shù)決定

<!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>聯(lián)系電話</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>

原文作者:祈澈姑娘
技術(shù)博客:http://www.reibang.com/u/05f416aefbe1

90后前端妹子蕊程,愛編程星持,愛運(yùn)營碳想,愛折騰钻趋。
堅(jiān)持總結(jié)工作中遇到的技術(shù)問題川陆,堅(jiān)持記錄工作中所所思所見,歡迎大家一起探討交流蛮位。

文末福利:關(guān)注「編程微刊」公眾號 较沪,在微信后臺回復(fù)「領(lǐng)取資源」,獲取IT資源200G干貨大全失仁。公眾號回復(fù)“1”尸曼,拉你進(jìn)程序員技術(shù)討論群

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市萄焦,隨后出現(xiàn)的幾起案子控轿,更是在濱河造成了極大的恐慌,老刑警劉巖拂封,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件茬射,死亡現(xiàn)場離奇詭異,居然都是意外死亡冒签,警方通過查閱死者的電腦和手機(jī)在抛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來萧恕,“玉大人刚梭,你說我怎么就攤上這事档悠。” “怎么了望浩?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵辖所,是天一觀的道長。 經(jīng)常有香客問我缘回,道長,這世上最難降的妖魔是什么典挑? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任酥宴,我火速辦了婚禮,結(jié)果婚禮上您觉,老公的妹妹穿的比我還像新娘拙寡。我一直安慰自己,他們只是感情好琳水,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布肆糕。 她就那樣靜靜地躺著,像睡著了一般在孝。 火紅的嫁衣襯著肌膚如雪诚啃。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天私沮,我揣著相機(jī)與錄音始赎,去河邊找鬼。 笑死仔燕,一個胖子當(dāng)著我的面吹牛造垛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播晰搀,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼五辽,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了厕隧?” 一聲冷哼從身側(cè)響起奔脐,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎吁讨,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體峦朗,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡建丧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了波势。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翎朱。...
    茶點(diǎn)故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡橄维,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拴曲,到底是詐尸還是另有隱情争舞,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布澈灼,位于F島的核電站竞川,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叁熔。R本人自食惡果不足惜委乌,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望荣回。 院中可真熱鬧遭贸,春花似錦、人聲如沸心软。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽删铃。三九已至算利,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間泳姐,已是汗流浹背效拭。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留胖秒,地道東北人缎患。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像阎肝,于是被迫代替她去往敵國和親挤渔。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內(nèi)容