javascript+css3 实现动态按钮菜单特效
2016-02-06 16:02
996 查看
一个菜单按钮特效案例,简单的实现了动态效果。
废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教。
<div class="bar" id="menubar"> <div class="menu" id="menu0"> </div> <div class="menu" id="menu1"> </div> <div class="menu" 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"; } } }
以上代码简单实现了动态按钮菜单特效,希望对大家有所帮助。
您可能感兴趣的文章:
相关文章推荐
- Extjs4.0 最新最全视频教程
- 底部Popwindow形式菜单的类的封装
- Javascript中toFixed方法的改进
- CSS3属性教程与案例分享
- CSS3属性教程与案例分享
- CSS3的calc()使用
- 使用CSS3的appearance属性改变元素的外观
- CSS3美化图片
- CSS3质感分析——表面线性渐变
- 分析选项卡底部内凹圆角制作
- 细说百度图片栏目——图片展示效果
- 8个实用的响应式设计框架
- 20+ Animation Scripts, Libraries and Plugins
- 5个常见可用性错误和解决方案
- 一步一步跟我学易语言之第二个易程序菜单设计
- IE右键菜单被修改
- 如何使用CSS3画出一个叮当猫
- jQuery菜单插件用法实例
- 基于Jquery和CSS3制作数字时钟附源码下载(CSS3篇)
- js可突破windows弹退效果代码