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):慢-中-快-太快导致超过了-返回到正确的位置
,专业术语为:超过范围的三次方缓动
:
1 2 3 4 5 6 | 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有一种重载!
常用的方式
:
1 | $( "html,body" ).animate({ scrollTop: "0px" }, 1000); |
另一种重载
:
1 2 3 4 5 6 7 8 9 | $({ 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下拉菜单的代码:
下面是厚颜无耻的求赞时间
您有没有对这篇文章感兴趣呢?
.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· 展开说说关于C#中ORM框架的用法!
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?