这是一个HTML5折叠菜单，但更像是一个折叠面板，仿苹果手机的passbook应用中的代码例子，请在火狐或chrome下浏览。不知道有没有听说过手机琴菜单，觉得这一个从形式上来说，是挺像的。
.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(/jscss/demoimg/201307/starbucks.png) no-repeat;
}
.airport{
background:url(/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;
}
passcard 1
passcard 2
passcard 3
$(function(){
$(‘.passcard’).hover(function(){
$(this).stop(false,false).animate({‘margin-bottom’:’-100px’},400)
},function(){
$(this).stop(false,false).animate({‘margin-bottom’:’-320px’},400)
})
})
复制代码
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3127296.html
