以下是 jquery顶部下拉菜单插件foldit特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery顶部下拉菜单插件foldit</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<link rel="stylesheet" href="css/foldit.css" type="text/css"/>
<style type="text/css">
body {
background:#666;
padding: 0 ;
margin: 0
}
.phone {
width: 304px;
height: 544px;
padding: 108px 27px 110px 27px;
margin: 30px auto;
background: url(img/phone.png) no-repeat
}
.app {
background:#0d3d69 url(img/bg.jpg) no-repeat 50% 0;
height: 544px;
position: relative;
}
.folditmenu {
padding: 0 ;
margin: 0 0 0 -30px ;
list-style: none ;
width: 60px;
position: absolute;
top:46px;
left:50%;
}
.folditmenu li {
height: 60px;
background: #fff;
border-top: 1px solid #ccc;
text-align: center;
z-index: 1
}
.actionItem {
border-radius: 0 0 10px 10px;
box-shadow: 0 9px 9px -2px #ccc inset;
}
.menuIsOpen .actionItem {
box-shadow: none
}
.menuIsOpen li:first-child {
box-shadow: 0 9px 9px -2px #ccc inset;
}
[class^="icon-"], [class*=" icon-"] {
display: inline-block;
width: 34px;
height: 34px;
margin-top: 15px;
line-height: 14px;
vertical-align: text-top;
background-image: url("img/icon.png");
background-position: 14px 14px;
background-repeat: no-repeat;
}
.icon-heart {
background-position: 0 2px;
}
.icon-comment {
background-position: 0px -39px;
}
.icon-edit {
background-position: -4px -91px;
}
.icon-send {
background-position: -2px -147px;
}
.icon-menu {
background-position: 1px -196px;
}
@media (max-width: 640px) {
.phone {
width: auto ;
height: 544px;
padding:0;
margin: 0px auto;
background:none
}
}
</style>
</head>
<body>
<div class="phone">
<div class="app">
<ul class="folditmenu">
<li>
<a href="#" class="icon icon-heart" > </a>
</li>
<li>
<a href="#" class="icon icon-comment" ></a>
</li>
<li>
<a href="#" class="icon icon-edit" ></a>
</li>
<li>
<a href="#" class="icon icon-send" ></a>
</li>
<li class="actionItem" >
<a href="#" class="icon icon-menu"></a>
</li>
</ul>
</div>
</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.foldit.min.js"></script>
<script>
(function($){
$( document ).ready(function() {
$( ".folditmenu" ).folditmenu({perspective:200});
});
})(jQuery);
</script>
</body>
</html>
JS代码(jquery.foldit.min.js):
/** * User:Volodymyr Teplyi * profile:Coldman333 http://codecanyon.net/user/Coldman333 * Date:2/11/14 * version:1.0.1 */
(function(f){
var h={
step:15,animationTime:150,perspective:500,odd:"odd",even:"even",actionItem:".actionItem",degree:90,childrens:"li"}
,e={
init:function(c){
var a=f.extend({
}
,h,c);
return this.each(function(){
var d=f(this),c=0,e=!1,g=f(a.actionItem),h=d.children(":even").not(g).addClass(a.even),m=d.children(":odd").not(g).addClass(a.odd),k=f(a.childrens,d),n=f(a.childrens,d).eq(0).outerHeight(),p=a.degree/a.step,l=function(d,f){
(function(){
var b=90-("down"===d?++c:--c)*p,e=0,g=0;
h.css("-webkit-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,-"+b+"deg)").css("-moz-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,-"+b+"deg)").css("-ms-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,-"+b+"deg)").css("transform","perspective("+a.perspective+"px) rotate3d(1,0,0,-"+b+"deg)");
m.css("-webkit-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,"+b+"deg)").css("-moz-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,"+b+"deg)").css("-ms-transform","perspective("+a.perspective+"px) rotate3d(1,0,0,"+b+"deg)").css("transform","perspective("+a.perspective+"px) rotate3d(1,0,0,"+b+"deg)");
e=0<c?parseInt(k[0].getBoundingClientRect().height,10):0;
for(b=0;
b<k.length;
b+=1)g=1==b%2?e*(b+1)-n:e*b,k[b].style.top=g+"px";
c==a.step||0==c?f():setTimeout(arguments.callee,a.animationTime/a.step)}
)()}
;
g.on("click",function(a){
d.hasClass("menuIsAmimationNow")||(e?(d.addClass("menuIsAmimationNow"),l("up",function(){
e=!1;
d.removeClass("menuIsAmimationNow");
d.removeClass("menuIsOpen")}
)):(d.addClass("menuIsAmimationNow menuIsAmimationNowDoun"),l("down",function(){
e=!0;
d.removeClass("menuIsAmimationNow menuIsAmimationNowDoun");
d.addClass("menuIsOpen")}
)));
a.preventDefault()}
)}
)}
}
;
f.fn.folditmenu=function(c){
if(e[c])return e[c].apply(this,Array.prototype.slice.call(arguments,1));
if("object"!==typeof c&&c)f.error(c+"not found");
else return e.init.apply(this,arguments)}
}
)(jQuery);
CSS代码(foldit.css):
.folditmenu{position:relative;top:0px;left:0px;right:0px;}
.folditmenu li{position:absolute;left:0px;right:0px;background:#fff;/*height:30px*/
/* if used without jQuerimobile css,use fixed height for item */
zoom:1;}
.folditmenu .even{position:absolute;-webkit-transform-origin:50% 0%;-moz-transform-origin:50% 0%;-ms-transform-origin:50% 0%;transform-origin:50% 0%;-webkit-transform:perspective(1000px) rotate3d(1,0,0,90deg);-moz-transform:perspective(1000px) rotate3d(1,0,0,90deg);-ms-transform:perspective(1000px) rotate3d(1,0,0,90deg);transform:perspective(1000px) rotate3d(1,0,0,90deg);zoom:1;}
.folditmenu .odd{position:absolute;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-ms-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform:perspective(1000px) rotate3d(1,0,0,-90deg);-moz-transform:perspective(1000px) rotate3d(1,0,0,90deg);-ms-transform:perspective(1000px) rotate3d(1,0,0,90deg);transform:perspective(1000px) rotate3d(1,0,0,90deg);zoom:1;}
.menuIsOpen{/* menu is open now */
}
.menuIsAmimationNow{/* menu is amimation now */
}
分享到QQ
分享到微博
微信扫一扫
