【移动端】向上滑动菜单-仿微信朋友圈

HTML代码为：

<header>
    <img id="bg" src="images/bg.jpg">
    <p id="user-name" class="data-name">万虎科技~贾素杰</p>
    <img id="avt" class="data-avt" src="images/0.jpg">
</header>
<div id="main">
     <div id="list">
          <ul>
              <li>
                  <div class="po-avt-wrap"><img class="po-avt data-avt" src="images/0.jpg"></div>
                  <div class="po-cmt">
                       <div class="po-hd">
                            <p class="po-name"><span class="data-name">万虎科技~贾素杰</span></p>
                            <div class="post">
                                 <p>大家好，听说国内冻成狗🐶？我这边还挺热～</p>
                                 <p>
                                    <img class="list-img" src="images/jt1.jpg" >
                                    <img class="list-img" src="images/yt3.jpg">
                                    <img class="list-img data-avt" src="images/0.jpg">
                                 </p>
                            </div>
                            <p class="time">刚刚</p><img class="c-icon" src="images/c.png">
                       </div>
                       <div class="r"></div>
                       <div class="cmt-wrap">
                            <div class="like"><img src="images/l.png">苍井空，陈冠希，杨幂，王思聪，陈赫，刘德华，马云...</div>
                            <div class="cmt-list">
                                 <p><span>wu世勋-EXO：</span>나는 서명～</p>
                                 <p><span>鹿晗：</span>我们在国内冻成狗，我也想跟哥您去热热～</p>
                                 <p><span>权志龙：</span>나는 서명～</p>
                                 <p><span>王思聪：</span>去哪玩啊？那么爽</p>
                                 <p><span class="data-name">万虎科技~贾素杰</span>  回复  <span>王思聪</span><span> ：</span>澳洲大堡礁，这边刚好是夏季，挺适合避寒的。</p>
                                 <p><span>杨幂：</span>😘私人飞机出行，求带上我～</p>
                            </div>
                       </div>
                  </div>
              </li>
              ...
          </ul>
     </div>
     <div id="share">
          <p>（此朋友圈纯属虚构）</p>
          <div style="padding:15px;padding-bottom:20px">
               <button id="gotoplay" onClick="showActionSheet();" class="btn btn-success btn-lg btn-block">我也要玩</button><br>
          </div>
     </div>
</div>
<!--弹窗 S-->
<div id="actionSheet_wrap">
    <div class="weui_mask_transition" id="mask" style="display: none;"></div>
    <div class="weui_actionsheet" id="weui_actionsheet">
        <div class="weui_actionsheet_menu">
            <div class="weui_actionsheet_cell title">选择下面👇进入你的朋友圈</div>
            <div class="weui_actionsheet_cell play_pyq" data-scene="1">男版朋友圈</div>
            <div class="weui_actionsheet_cell play_pyq" data-scene="2">女版朋友圈</div>
        </div>
        <div class="weui_actionsheet_action">
            <div class="weui_actionsheet_cell" id="actionsheet_cancel">取消</div>
        </div>
    </div>
</div>
<div style="margin:0 auto;display:none;">
    <img class="data-avt" src="images/0.jpg">
</div>

JS代码为：

setTimeout(function(){
  var cw=$('.list-img').width();
  $('.list-img').css({'height':cw+'px'});
},0)
function hideActionSheet(weuiActionsheet,mask){
  weuiActionsheet.removeClass('weui_actionsheet_toggle');
  mask.removeClass('weui_fade_toggle');
  weuiActionsheet.on('transitionend',function(){
    mask.hide();
  }).on('webkitTransitionEnd',function(){
    mask.hide();
  })
}
function showActionSheet(){
  var mask=$('#mask');
  var weuiActionsheet=$('#weui_actionsheet');
  weuiActionsheet.addClass('weui_actionsheet_toggle');
  mask.show().addClass('weui_fade_toggle').click(function(){
    hideActionSheet(weuiActionsheet,mask);
  });
  $('#actionsheet_cancel').click(function(){
    hideActionSheet(weuiActionsheet,mask);
  })
  //解除绑定
  weuiActionsheet.unbind('transitionend').unbind('webkitTransitionEnd');
}
$('img').not('.noplayimg').on('click',function(e){
  showActionSheet();
})

本地效果为：app/plug/friend/index.html

线上效果为：http://www.17sucai.com/pins/17282.html