码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-08-21 14:47:07      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:position   content   doc   animate   cti   简单的   -o   new   utf-8   

<!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>

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

标签:position   content   doc   animate   cti   简单的   -o   new   utf-8   

原文地址:http://www.cnblogs.com/lunbawu/p/7404095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!