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 相关文章推荐
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
Apr 12 Javascript
JS面向对象、prototype、call()、apply()
May 14 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
javascript权威指南 学习笔记之变量作用域分享
Sep 28 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 Javascript
js 加密压缩出现bug解决方案
Nov 25 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 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
php5数字型字符串加解密代码
2008/04/24 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php格式化电话号码的方法
2015/04/24 PHP
php使用CURL不依赖COOKIEJAR获取COOKIE的方法
2015/06/17 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
JS动态修改iframe内嵌网页地址的方法
2015/04/01 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
JS实现元素上下左右移动效果
2017/10/18 Javascript
vue发送ajax请求详解
2018/10/09 Javascript
详解ES6 Fetch API HTTP请求实用指南
2018/11/14 Javascript
js通过canvas生成图片缩略图
2020/10/02 Javascript
[01:01:36]Optic vs paiN 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
python+opencv识别图片中的圆形
2020/03/25 Python
浅析Python 3 字符串中的 STR 和 Bytes 有什么区别
2018/10/14 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
浅谈Pytorch中的torch.gather函数的含义
2019/08/18 Python
python如何实现图片压缩
2020/09/11 Python
美国娱乐和流行文化商品店:FYE
2017/09/14 全球购物
英语自荐信常用语句
2013/12/13 职场文书
鉴定评语大全
2014/05/05 职场文书
七一建党节演讲稿
2014/09/11 职场文书
单位实习鉴定评语
2015/01/04 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB