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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
jQuery实现的类似淘宝网站搜索框样式代码分享
Aug 24 Javascript
jQuery实现的背景动态变化导航菜单效果
Aug 24 Javascript
javascript基本算法汇总
Mar 09 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
Vue路由之JWT身份认证的实现方法
Aug 26 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 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
晶体管来复再生式二管收音机
2021/03/02 无线电
PHP中实现图片的锐化
2006/10/09 PHP
如何把PHP转成EXE文件
2006/10/09 PHP
php中autoload的用法总结
2013/11/08 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
AngularJS基础 ng-list 指令详解及示例代码
2016/08/02 Javascript
jQuery查找节点方法完整实例
2016/09/13 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
2017/04/07 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
如何使用electron-builder及electron-updater给项目配置自动更新
2018/12/24 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
ant-design-vue 时间选择器赋值默认时间的操作
2020/10/27 Javascript
[47:03]Ti4第二日主赛事败者组 LGD vs iG 2
2014/07/21 DOTA
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python机器人行走步数问题的解决
2018/01/29 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
Python3基本输入与输出操作实例分析
2020/02/14 Python
如何使用Python自动生成报表并以邮件发送
2020/10/15 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
应届生护士求职信
2013/11/01 职场文书
企业管理培训感言
2014/01/27 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
通讯稿范文
2015/07/22 职场文书
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Python实现老照片修复之上色小技巧
2021/10/16 Python