javascript+css3 实现动态按钮菜单特效


Posted in Javascript onFebruary 06, 2016

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

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

<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";
}
}
}

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

Javascript 相关文章推荐
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
Jan 22 Javascript
jQuery操作属性和样式详解
Apr 13 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
Angular4 中常用的指令入门总结
Jun 12 Javascript
详解VUE 数组更新
Dec 16 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
Vue实现表格中对数据进行转换、处理的方法
Sep 06 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 Javascript
nuxt 页面路由配置,主页轮播组件开发操作
Nov 05 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 #Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 #Javascript
简介AngularJS中$http服务的用法
Feb 06 #Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
Feb 06 #Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 #Javascript
详解Angularjs filter过滤器
Feb 06 #Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 #Javascript
You might like
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
node.js require() 源码解读
2015/12/13 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
基于JavaScript实现的折半查找算法示例
2017/04/14 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
基于JavaScript实现无缝滚动效果
2017/07/21 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
Angular路由ui-router配置详解
2018/08/01 Javascript
javascript实现文本框标签验证的实例代码
2018/10/14 Javascript
微信公众号开发之微信支付代码记录的实现
2019/10/16 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
VUE实现吸底按钮
2021/03/04 Vue.js
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
Python正则表达式使用范例分享
2016/12/04 Python
Python中is与==判断的区别
2017/03/28 Python
解决Tensorflow安装成功,但在导入时报错的问题
2018/06/13 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
阿迪达斯越南官网:adidas越南
2020/07/19 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
十岁生日同学答谢词
2014/01/19 职场文书
四年级学生评语大全
2014/04/21 职场文书
2014年教师节寄语
2014/08/11 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2015年业务工作总结范文
2015/04/10 职场文书
公司地址变更通知
2015/04/25 职场文书
小学四年级班主任工作经验交流材料
2015/11/02 职场文书
外出培训学习心得体会
2016/01/18 职场文书