简单的从左侧展开层，转场效果

<!DOCTYPE html>

<html>

<head lang="en">   

  <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">   

  <meta name="apple-mobile-web-app-capable" content="yes">    

<meta name="apple-mobile-web-app-status-bar-style" content="black">  

   <title></title>    

<script src="/jquery-1.9.1.js"></script>   

  <style>      

   html,body{ margin: 0px;  padding: 0px;}         .

new_show_box{             width: 100%;             height: 100vh;             position: fixed;             overflow-y: scroll;             -webkit-overflow-scrolling: touch;             top:0;             left:100%;             background-color: #c8c8c8 !important;             z-index: 99;         }

    </style>    

<script>       

  $(function(){         

    $(".gohitory").click(function () {           

      $('.new_show_box').animate({left:"0%"});          

   })          

   $(".gohitory1").click(function () {         

        $('.new_show_box').animate({left:"100%"},300);            

})   

      })

    </script>

</head>

<body>  

<a href="#" class="gohitory">展开</a>

 <div class="new_show_box">   

   <a href="#" class="gohitory1">缩进</a>  </div>

</body>

</html>

posted on 2017-08-21 14:07  伦巴舞  阅读(210)  评论(0)    收藏  举报