zoukankan      html  css  js  c++  java
  • 3D滚动下拉菜单-简直不要太任性

    最初看到这个是在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事件来拼接新的样式赋值给你要执行动画的元素!


    下面是厚颜无耻的求赞时间

    您有没有对这篇文章感兴趣呢?








    .

  • 相关阅读:
    React元素渲染
    初识JSX
    微信小程序复制文本到剪切板
    微信小程序报错request:fail url not in domain list
    小程序,通过自定义编译条件,模拟推荐人功能
    积分抵扣逻辑
    微信小程序 switch 样式
    tomcat 配置开启 APR 模式
    tomcat8 传输json 报错 Invalid character found in the request target. The valid characters are defined in RFC 3986
    c++数组初始化误区
  • 原文地址:https://www.cnblogs.com/lianmin/p/4307788.html
Copyright © 2011-2022 走看看