javascript+css3 实现动态按钮菜单特效
更新时间:2016年2月12日 10:01 点击:2624
一个菜单按钮特效案例,简单的实现了动态效果。
废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教。
<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"; } } }
以上代码简单实现了动态按钮菜单特效,希望对大家有所帮助。
相关文章
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
- 在BS中,xml,html,css和js我们都学过,起初分不清这四者的区别和联系,随着知识的增长,有了一些体会,下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别,需要的朋友参考下...2016-02-21
- 在淘宝等购物网站,我们都会看到一个发送短信倒计时的按钮,究竟是如何实现的呢?下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时,需要的朋友参考下...2016-01-02
- javascript代码判断按钮是否被点击了在项目中经常会遇到这个需求,今天小编抽点时间给大家分享一段代码关于javascript判断按钮是否被点击的方法,感兴趣的朋友一起学习吧...2015-12-14
- 这篇文章主要介绍了javascript+css3 实现动态按钮菜单特效的相关资料,需要的朋友可以参考下...2016-02-12
- 这篇文章主要介绍了jquery+css3实现会动的小圆圈效果,涉及jquery基于时间函数动态操作页面元素css3样式的相关技巧,需要的朋友可以参考下...2016-01-29
- 这篇文章主要介绍了Angular2搜索和重置按钮过场动画,需要的朋友可以参考下...2017-05-27
- 使用Eclipse编辑jsp、js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,下面通过脚本之家平台给大家分享几种解决办法,需要的朋友参考下...2016-02-05
- 这篇文章主要介绍了jquery及js实现动态加载js文件的方法,结合实例形式分别讲述了基于jQuery以及基于JavaScript的文件动态加载方法,需要的朋友可以参考下...2016-01-24
- 下面小编就为大家带来一篇JS判断键盘是否按的回车键并触发指定按钮点击操作的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-02-19
详解CSS3中nth-child与nth-of-type的区别
这篇文章详细解析了CSS3中nth-child与nth-of-type的区别,有兴趣的同学可以参考一下 CSS3中nth-child与nth-of-type的区别其实很简单::nth-of-type为什么要叫:nth-of...2017-01-22- 这篇文章主要为大家详细介绍了js css实现垂直方向自适应的三角提示菜单的相关资料,需要的朋友可以参考下...2016-07-01
- 这篇文章主要介绍了在WordPress的后台中添加顶级菜单和子菜单的函数详解,需要的朋友可以参考下...2016-01-14
- 我们经常看到有很多的垂直时间轴用来记录事件进展,而有朋友问我要求分享水平的时间轴,其实水平时间轴的难点在于自适应屏幕尺寸。那么 今天我要给大家分享的是一款支持响应式、支持触屏手势滑动的水平时间轴...2015-12-21
Ajax+FormData+javascript实现无刷新表单信息提交
在前端开发中ajax,formdata和js实现无刷新表单信息提交非常棒,接下来通过本文给大家介绍Ajax+FormData+javascript实现无刷新表单信息提交的相关资料,需要的朋友可以参考下...2016-10-25- 本文给大家分享一段JS实例代码介绍动态创建按钮的方法,需要的朋友参考下本文...2016-02-01
- 本文主要介绍了js+css3实现旋转效果的方法。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了jQuery控制frames及frame页面JS的方法,涉及jQuery针对页面元素的判定及frame框架的操作技巧,需要的朋友可以参考下...2016-03-10
CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-02