手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript+css3 实现动态按钮菜单特效
javascript+css3 实现动态按钮菜单特效
摘要:一个菜单按钮特效案例,简单的实现了动态效果。废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教。.bar{width:px...

一个菜单按钮特效案例,简单的实现了动态效果。

废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教。

<div id="menubar"> <div id="menu0"> </div> <div id="menu1"> </div> <div id="menu2"> </div> </div> .bar{ width:px; height:px; border:px solid #ccc; border-radius:%; position:fixed; top:px; right:px; z-index:; cursor:pointer; } .menu{ width:px; height:px; background-color:#ccc; position:absolute; transform:translated(-%,-%,); left:%; transition:all .s cubic-bezier(., ., ., .) s } #menu{ top:%; } #menu{ top:%; } #menu{ top:%; } window.onload = function () { var menubar = document.getElementById("menubar"); var menu = document.getElementById("menu"); var menu = document.getElementById("menu"); var menu = document.getElementById("menu"); var i = ; menubar.onclick = function () { i++; if (i % == ) { menu.style.top = + "%"; menu.style.display = "none"; menu.style.top = + "%"; menu.style.transform = "translated(-%,-%,) rotate(deg)"; menu.style.transform = "translated(-%,-%,) rotate(deg)"; } else { menu.style.transform = "translated(-%,-%,) rotate(deg)"; menu.style.transform = "translated(-%,-%,) rotate(deg)"; menu.style.top = + "%"; menu.style.top = + "%"; menu.style.display = "block"; } } }

以上代码简单实现了动态按钮菜单特效,希望对大家有所帮助。

【javascript+css3 实现动态按钮菜单特效】相关文章:

javascript常用的方法分享

js+css实现回到顶部按钮(back to top)

JavaScript实现添加、查找、删除元素

JavaScript实现表格点击排序的方法

javascript使用Promise对象实现异步编程

javascript实现树形菜单的方法

JavaScript实现广告的关闭与显示效果实例

javascript实现点击商品列表checkbox实时统计金额的方法

javascript实现简单的进度条

JavaScript实现Flash炫光波动特效

精品推荐
分类导航