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

2024-09-05 12:18:49

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>passbook仿苹果手机的面板合拢折叠效果-html5特效</title><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(/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;}</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="/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></html>

上一篇：html5 canvas实例碰撞检测撞球示例

下一篇：HTML5 canvas 层拖动实例