HTML5仿苹果手机的面板合拢折叠效果

2014-04-07 06:33:01 -0400

代码说明

这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。转自源码爱好者

HTML代码

<style>
.pocket{
  width:300px;
  height:460px;
  padding: 10px;
  overflow: hidden;
  float: left;
  border: 1px solid #EDEDED;
  margin: 4px;
  border-radius: 8px;
  box-shadow:0 -5px 30px rgba(0,0,0,0.2) inset;
}
.passcard {
  float: left;
  width:300px;
  height:380px;
  color: #878787;
  text-align: center;
  padding-top: 5px;
  margin-bottom: -320px;
  cursor: pointer;
}
.starbucks{
    background:url(http://www.codefans.net/jscss/demoimg/201307/starbucks.png) no-repeat;
}
.airport{
    background:url(http://www.codefans.net/jscss/demoimg/201307/airport.png) no-repeat;
}
.paper{
  border: 1px solid #EDEDED;
  color: #A8A8A8;
  text-align: center;
  font:26px 'Segoe UI Light',Helvetica,Arial,'Sans-Serif';
  background:-webkit-gradient(linear,left top,left bottom,color-stop(50%,rgba(229, 249, 249, 1)),color-stop(100%,rgba(240, 240, 240, 1)));
  background: -webkit-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  background: -moz-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  background: -o-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  background: -ms-linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  background: linear-gradient(top,rgba(249, 249, 249, 1) 50%,rgba(240, 240, 240, 1) 100%);
  background: -webkit-linear-gradient(top,rgba(255, 255, 255, 0.05) 0%,rgba(255, 255, 255, 0.05) 20%,rgba(0, 0, 0, 0.05) 100%);
border-radius:14px;
box-shadow:-2px -1px 2px rgba(0,0,0,0.1);
}
.pod {
  background: none repeat scroll 0 0 white;
  cursor: pointer;
  height: 160px;
  width: 300px;
  border: 1px solid #CDCDCD;
  border-radius: 6px;
  float: left;
  margin: 3px 15px 15px 3px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2),0 -4px 0 #E8E8E8 inset;
}
</style>
</head>
<body>
<div class='pocket'>
    <div class='passcard starbucks'></div>
    <div class='passcard starbucks'></div>
    <div class='passcard starbucks'></div>
</div>
<div class='pocket'>
    <div class='passcard airport'></div>
    <div class='passcard airport'></div>
    <div class='passcard airport'></div><div class='passcard airport'></div>
</div>
<div class='pocket'>
    <div class='passcard paper'>passcard 1</div>
    <div class='passcard paper'>passcard 2</div>
    <div class='passcard paper'>passcard 3</div>
</div>
</body>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
    $('.passcard').hover(function(){
      $(this).stop(false,false).animate({'margin-bottom':'-100px'},400)
    },function(){
      $(this).stop(false,false).animate({'margin-bottom':'-320px'},400)
    })
})
</script>
</script>

代码演示

passcard 1

passcard 2

passcard 3

«Newer Older»

Back to home

Subscribe | Register | Login | N