3D滚动下拉菜单-简直不要太任性_.NET_编程开发_程序员俱乐部

中国优秀的程序员网站程序员频道CXYCLUB技术地图
热搜:
更多>>
 
您所在的位置: 程序员俱乐部 > 编程开发 > .NET > 3D滚动下拉菜单-简直不要太任性

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

 2015/3/2 9:41:57  上位者的怜悯  程序员俱乐部  我要评论(0)
  • 摘要:预览先看看最终效果简介由来最初看到这个是在14年5月,猛戳这里:妙味官网,觉得非常炫。想要做出来,所以就开始学习web。那时候是做c/s的,也因为这个走上了b/s之路,(?Д?≡?Д?)现在前后台都要写了。前几天又来试试,发现自己能大概实现了(?∀?),好屌。因为平时主要是实现功能,所以可能一些代码习惯,实现方式不太好,希望指出来。前提需要了解的东西1.css3基础我也是一个菜鸟,会的不多( ̄∇ ̄),就不在这里show无知了,主要涉及到:transform
  • 标签:菜单

预览 先看看最终效果

简介 由来

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

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

前几天又来试试,发现自己能大概实现了( ?∀?),好屌。

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

前提 需要了解的东西

1. css3基础

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

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

2. 了解缓动

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

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

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

3. 利用jquery来实现缓动

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

class="alert alert-danger">附:使用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下拉菜单的代码:


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

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








.

上一篇: 沪江网CEO伏彩瑞:我们是如何做在线教育的? 下一篇: 没有下一篇了!
发表评论
用户名: 匿名