3D滚动下拉菜单-简直不要太任性

头像
JingDing
    阅读 9 分钟
    5

    看到一个很棒的菜单效果，分享一下
    原文 3D滚动下拉菜单-简直不要太任性

    预览(先看看最终效果)

    http://runjs.cn/detail/re75abbw

    简介(由来)

    最初看到这个是在14年5月，猛戳这里：妙味官网，觉得非常炫。想要做出来，所以就开始学习web。

    那时候是做c/s的，也因为这个走上了b/s之路， 现在前后台都要写了。

    前几天又来试试，发现自己能大概实现了，好屌。

    因为平时主要是实现功能，所以可能一些代码习惯，实现方式不太好，希望指出来。

    前提(需要了解的东西)

    1. css3基础

    我也是一个菜鸟，会的不多(￣∇￣)，就不在这里show无知了，主要涉及到：transform,transform-style(IE不支持？)

    可以参见：Transform-style和Perspective属性

    2. 了解缓动

    大家玩一玩这个菜单，会看到它不是匀速展开的，而是在展开动作的末尾“抖”一下

    这个涉及到算法...我个人仅作了解(就是只知道这个东西，怎么实现不知道)

    各种缓动效果和更详细的说明：JavaScript Tween算法及缓动效果

    3. 利用jquery来实现缓动

    jquery有animate方法，可以非常方便的实现动画，原理是实时改变节点的样式。

    附：使用jquery的animate实现的动画，节点最好不要设置css3的transition，有冲突

    我看到jquery的动画也不是匀速改变，于是查了一下资料，确实也有这个缓动算法，默认只有两种：linear匀速,swing慢-快-慢，添加扩展方法来实现(如2中链接缓动实例的 easeOutBack)：慢-中-快-太快导致超过了-返回到正确的位置，专业术语为：超过范围的三次方缓动：

    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;
    }
})

    jQuery的animate动画，我以前不知道在哪里看到的：只能实现可以用数字表示的动画。也就是说css3的transform是不行的。但是animate有一种重载！

    常用的方式：

    $("html,body").animate({ scrollTop: "0px" }, 1000);

    另一种重载：

    $({ num: 32 }).animate({ num: 64 }, {
    duration:1000,
    step: function () {
        console.log("当前的num是：" + this.num);
    },
    complete: function () {
        console.log("结束了，num是：" + this.num);
    }
});

    clipboard.png

    哈哈，看到这个大家就有思路了吧：

    根据要改变的样式定义一个对象，利用animate改变这个对象，监听step和complete事件来拼接新的样式赋值给你要执行动画的元素！

    具体实现(最终代码)

    在妙味官网上面看了很久都不知道从何看起，把这个做出来之后看到博友 吕大豹 将妙味的代码扒出来了，艹，还是没看懂。

    以下是3D下拉菜单的代码：

    3D下拉菜单 :在线演示查看源码

    HTML :

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    <script type="text/javascript" class="library" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></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>

    JavaScript :

    //添加缓动扩展
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({ 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({ 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);
    });
});

    CSS :

    *{
    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;
}
    javascript3d
    JingDing
    2.5k 声望124 粉丝

    新手请多多指教~

    « 上一篇
    angularjs源码分析之：angularjs执行流程
    下一篇 »
    你所必须掌握的三种异步编程方法callbacks,listeners,promise

    引用和评论

    推荐阅读
    头像
    JavaScript MVC 学习笔记（七）模型之ORM

    JingDing赞 1阅读 3.5k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.6k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新