<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> <style> *{ box-sizing: border-box; } .P800 { -webkit-perspective: 800px; -moz-perspective: 800px; -ms-perspective: 800px; perspective: 800px; } .T3D { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } body{ background: #fff url(http://www.miaov.com/2013/css/bg/bg1.jpg) no-repeat top right; } #fold_box { position: absolute; right: 100px; top: 0; width: 146px; height: 54px; } #fold h2 { margin: 0; width: 146px; height: 54px; padding-top: 18px; line-height: 36px; text-indent: 50px; font-size: 16px; color: #fff; background: url(http://www.miaov.com/2013/img/topMenu/topMenu.png) no-repeat; position: relative; z-index: 2; font-family: arial; -ms-transform: translateZ(1px); -moz-transform: translateZ(1px); -webkit-transform: translateZ(1px); -o-transform: translateZ(1px); transform: translateZ(1px); } #fold_list { list-style: none; margin: 0; padding: 0; } .fold_pager { width: 146px; height: 30px; transform-origin: center top; } #fold_list a { display: inline-block; background-color: rgb(223, 223, 223); width: 146px; height: 29px; margin-bottom: 1px; line-height: 29px; color: #d16c6c; text-indent: 16px; font-size: 13px; text-decoration: none; z-index: 3; font-family: arial; -ms-transition: 0.6s; -moz-transition: 0.6s; -webkit-transition: 0.6s; -o-transition: 0.6s; transition: 0.6s; } #fold_list a:hover { background-color: #f69 !important; color: #fff; text-indent: 20px; font-size: 14px; box-shadow: 1px 1px 3px 2px #dfdfdf; } </style> <script type="text/javascript" class="library" src="js/jquery-1.11.3.min.js"></script> <script> //添加缓动扩展 jQuery.extend(jQuery.easing,{ easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b; } }) var pageArr; function rotateDown(index) { if (index < 0 || index >= pageArr.length) { return; } var ele = pageArr.eq(index); ele.children("a").css("background-color", "#fff"); var obj = ele.data("obj"); if (!obj) { ele.data("obj", { r: getNumByEle(ele) }); obj = ele.data("obj"); } else obj.r = getNumByEle(ele); $(obj).animate({ r: 0 }, { duration: 1000, easing: "easeOutBack", step: function () { ele.css({ "-moz-transform": "rotateX(" + this.r + "deg)", "-webkit-transform": "rotateX(" + this.r + "deg)", "-0-transform": "rotateX(" + this.r + "deg)", "-ms-transform": "rotateX(" + this.r + "deg)", "transform": "rotateX(" + this.r + "deg)" }); //根据偏移量判断是否展开下一个 if (ele.data("opening")) return; //已经开始折叠下一个了 var rotateOff = getNumByEle(ele); if (rotateOff > -120) { ele.data("opening", true); rotateDown(index + 1); } }, complete: function () { ele.css({ "-moz-transform": "rotateX(0deg)", "-webkit-transform": "rotateX(0deg)", "-0-transform": "rotateX(0deg)", "-ms-transform": "rotateX(0deg)", "transform": "rotateX(0deg)" }); } }); } function rotateUp(index) { if (index < 0 || index >= pageArr.length) { return; } var ele = pageArr.eq(index); ele.children("a").css("background-color", "rgb(223,223,223)"); var obj = ele.data("obj"); if (!obj) { ele.data("obj", { r: getNumByEle(ele) }); obj = ele.data("obj"); } else obj.r = getNumByEle(ele); $(obj).animate({ r: -180 }, { duration: 600, easing: "linear", step: function () { ele.css({ "-moz-transform": "rotateX(" + this.r + "deg)", "-webkit-transform": "rotateX(" + this.r + "deg)", "-0-transform": "rotateX(" + this.r + "deg)", "-ms-transform": "rotateX(" + this.r + "deg)", "transform": "rotateX(" + this.r + "deg)" }); //根据偏移量判断是否折叠上一个 if (ele.data("closing")) return; //已经开始折叠上一个了 var rotateOff = getNumByEle(ele); if (rotateOff < -60) { ele.data("closing", true); rotateUp(index - 1); } }, complete: function () { ele.css({ "-moz-transform": "rotateX(-180deg)", "-webkit-transform": "rotateX(-180deg)", "-0-transform": "rotateX(-180deg)", "-ms-transform": "rotateX(-180deg)", "transform": "rotateX(-180deg)" }); } }); } function getNumByEle(ele) { var rotateStyle = ele.attr("style"); return rotateStyle.match(/rotateX(([-]?d+)/)[1]; } function stopAll() { for (var i = 0; i < pageArr.length; i++) { var ele = pageArr.eq(i); ele.data("opening", false); ele.data("closing", false); var obj = ele.data("obj"); if (obj && $(obj).stop) { $(obj).stop(true, false); } } } $(function(){ pageArr = $("#fold .fold_pager"); $("#fold").mousemove(function (e) { //Y轴旋转 var el = e.clientX - $(this).offset().left; var off = 60 * el / $(this).width() - 30; //this.style.transform = "rotateY(" + off + "deg)"; $(this).css({ "-webkit-transform":"rotateY(" + off + "deg)", "-moz-transform":"rotateY(" + off + "deg)", "-ms-transform":"rotateY(" + off + "deg)", "-o-transform":"rotateY(" + off + "deg)", "transform":"rotateY(" + off + "deg)" }); }).mouseenter(function () { //展开 stopAll(); rotateDown(0); }).mouseleave(function () { //折叠 stopAll(); rotateUp(pageArr.length - 1); }); }); </script> </head> <body> <div id="fold_box" class="P800"> <div id="fold" class="T3D fold_pager"> <h2>3D下拉菜单</h2> <div id="fold_list" class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> <div class="T3D fold_pager" style="transform: rotateX(-180deg); -webkit-transform: rotateX(-180deg);"> <a href="#">基于 - jquery+缓动</a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html>