3D滾動下拉菜單-簡直不要太任性

ruicbAndroid 發布于2019-08-21 10:26 / 1179人閱讀

摘要：看到一個很棒的菜單效果，分享一下原文滾動下拉菜單簡直不要太任性預覽先看看最終效果簡介由來最初看到這個是在年月，猛戳這里妙味官網，覺得非常炫。

看到一個很棒的菜單效果，分享一下
原文 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);
    }
});

哈哈，看到這個大家就有思路了吧：

根據要改變的樣式定義一個對象，利用animate改變這個對象，監聽step和complete事件來拼接新的樣式賦值給你要執行動畫的元素！

具體實現(最終代碼)

在妙味官網上面看了很久都不知道從何看起，把這個做出來之后看到博友呂大豹將妙味的代碼扒出來了，艸，還是沒看懂。

以下是3D下拉菜單的代碼：

3D下拉菜單 :在線演示查看源碼

HTML?:



    
        
        RunJS
    
    
    
        
        
            3D下拉菜單
            
                基于 - jquery+緩動
                
                    基于 - jquery+緩動
                    
                        基于 - jquery+緩動
                        
                            基于 - jquery+緩動
                            
                                基于 - jquery+緩動
                                
                                    基于 - jquery+緩動
                                    
                                        基于 - jquery+緩動
                                        
                                            基于 - jquery+緩動
                                            
                                                基于 - jquery+緩動
                                                
                                                    基于 - jquery+緩動

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

云服務器 GPU云服務器不要太 js下拉框數據太多 jsp下拉框數據太多下拉滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85535.html

CSS3熱身實戰--過渡與動畫（實現炫酷下拉，手風琴，無縫滾動）

摘要：規定動畫的時長。注意子菜單要用隱藏，在顯示的時候再設置。如果不加，實際上子菜單，以及子菜單下面的一直在頁面上，如果鼠標移上去子菜單，以及子菜單下面的。 1.前言在自己的專欄上寫了十幾篇文章了，都是與js有關的。暫時還沒有寫過關于css3的文章。css3，給我的感覺就是，不難，但是很難玩轉自如。今天，就用css3來實現三個特效，希望這三個特殊能讓大家受到啟發，利用css3做出更好，更炫...

zqhxuyuan 2019-08-29 13:03 評論0 收藏0
支持大數據渲染下拉列表組件開發 SuperSelect(基于antd Select)

摘要：功能簡介的組件不支持大數據量的下拉列表渲染，下拉列表數量太多會出現性能問題，基于封裝實現，替換原組件下拉列表，只渲染幾十條列表數據，隨下拉列表滾動動態刷新可視區列表狀態，實現大數據量列表高性能渲染。功能簡介 antd 的 Select 組件不支持大數據量的下拉列表渲染，下拉列表數量太多會出現性能問題， SuperSelect 基于 antd 封裝實現，替換原組件下拉列表，只渲染幾十條列表數據...

phoenixsky 2019-05-23 13:53 評論0 收藏0
FE.CSS-Sultana后記：純css也能寫col,select,datepicker,caro

摘要：接著只要在中使用就能搞定自適應。代碼如下標題標題標題標題標題在上述點功能中，可以用變量解決，比如實現了寬度，高度圓點大小直徑的控件。未完待續背景如今css3越來越發達，focus-within等屬性也已經開始在Chrome得到支持。如果有出色的css功底，一點點ps技能，你也能用css3配合原生html標簽寫出優秀的框架。通過對css3的實踐，我發現自定義原生控件并不是什么難事，...

BigTomato 2019-08-29 15:17 評論0 收藏0