基于jQuery代码实现圆形菜单展开收缩效果


Posted in Javascript onFebruary 13, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<head>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.menu.js"></script>
<style>
body {
  margin:0 auto;
  background:none repeat scroll 0 0 #FCFCFC
}
.outer_container {
  height:200px;
  position:relative
}
.menu_button {
  position:absolute;
  bottom:0;
  left:0;
  border-radius:50%;
  height:36px;
  width:36px;
  border:4px solid #fff;
  box-shadow:rgba(0,0,0,.3) 0 3px 8px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.3) 0 0 0 1px,inset rgba(255,255,255,.3) 0 1px 0 1px;
  text-indent:-99999px;
  overflow:hidden;
  background-color:#e34f3f;
  background-image:-moz-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-ms-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-webkit-gradient(linear,0 0,0 100%,from( #f76f54),to( #c61f1f));
  background-image:-webkit-linear-gradient(top, #f76f54, #c61f1f);
  background-image:-o-linear-gradient(top, #f76f54, #c61f1f);
  background-image:linear-gradient(top, #f76f54, #c61f1f);
  background-repeat:repeat-x;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f76f54', endColorstr='#c61f1f', GradientType=0);
  z-index:9999;
  outline:0
}
.menu_button span {
  display:block;
  height:36px;
  width:36px;
  background:url("../images/cross.png") no-repeat center center;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4s ease;
background-size:20px 20px
}
.menu_option {
  bottom:18px;
  left:5px;
  position:absolute
}
.menu_option li {
  position:absolute;
  display:block;
  top:0;
  left:0;
  -webkit-transition:.3s;
  -moz-transition:.3s;
  -ms-transition:.3s;
  -o-transition:.3s;
  transition:.3s
}
.menu_option li a {
  position:relative;
  display:block;
  border-radius:50%;
  width:26px;
  height:26px;
  border:3px solid #fff;
  box-shadow:rgba(0,0,0,.4) 0 0 5px 0,rgba(0,0,0,.2) 0 0 0 1px,inset rgba(0,0,0,.5) 0 0 2px 0;
  text-indent:-99999px;
  overflow:hidden;
  background:#444
}
.menu_option li a span {
  background-attachment:scroll;
  background-clip:border-box;
  background-color:transparent;
  background-image:url("../images/usr.png");
  background-origin:padding-box;
  background-position:center center;
  background-repeat:no-repeat;
  background-size:16px 16px;
  display:block;
  width:26px;
  height:26px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4s ease
}
.btn-rotate span {
  -webkit-transform:rotate(-135deg);
  -moz-transform:rotate(-135deg);
  -ms-transform:rotate(-135deg);
  -o-transform:rotate(-135deg);
  transform:rotate(-135deg)
}
</style>
</head>
<body>
<!-- 代码 开始 -->
  <div id="outer_container" class="outer_container" >
    <a class="menu_button" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" title="Toggle"><span>Menu Toggle</span></a>
    <ul class="menu_option">
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
     <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" target="_blank"><span>Item</span></a></li>
    </ul>
  </div>
<!-- 代码 结束 -->
<script>
function PieMenuInit(){   
  $('#outer_container').PieMenu({
    'starting_angel':0, //起始角度
    'angel_difference' : 90, //散开角度
    'radius':100, //圆形弧度
  });     
}
$(function() {     
  PieMenuInit();     
});
</script>
</body>

以上所述是小编给大家介绍的基于jQuery代码实现圆形菜单展开收缩效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
javascript 通用loading动画效果实例代码
Jan 14 Javascript
javascript记住用户名和登录密码(两种方式)
Aug 04 Javascript
JS文字球状放大效果代码分享
Aug 19 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
js实现多图左右切换功能
Aug 04 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
Vue实现搜索结果高亮显示关键字
May 28 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 #Javascript
Vue.js实现简单动态数据处理
Feb 13 #Javascript
JavaScript获取select中text值的方法
Feb 13 #Javascript
详谈$.data()的用法和作用
Feb 13 #Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
Feb 13 #Javascript
JavaScript实现公历转农历功能示例
Feb 13 #Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 #Javascript
You might like
最简单的PHP程序--记数器
2006/10/09 PHP
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
jQuery超酷平面式时钟效果代码分享
2020/03/30 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
jQuery插件Validation快速完成表单验证的方式
2016/07/28 Javascript
js实现交通灯效果
2017/01/13 Javascript
jQuery使用bind函数实现绑定多个事件的方法
2017/10/11 jQuery
vue 中directive功能的简单实现
2018/01/05 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
浅析Python装饰器以及装饰器模式
2018/05/28 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
浅述python2与python3的简单区别
2018/09/19 Python
对sklearn的使用之数据集的拆分与训练详解(python3.6)
2018/12/14 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python 线程池用法简单示例
2019/10/02 Python
Python json转字典字符方法实例解析
2020/04/13 Python
python之语音识别speech模块
2020/09/09 Python
MVMT手表官方网站:时尚又实惠的高品质手表
2016/12/04 全球购物
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
P D PAOLA意大利官网:西班牙著名的珠宝首饰品牌
2019/09/24 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
C语言笔试集
2012/07/24 面试题
全民健身日活动方案
2014/01/29 职场文书
土木工程专业本科生求职信
2014/10/01 职场文书
决心书格式及范文
2019/06/24 职场文书
个人自我鉴定怎么写?
2019/07/01 职场文书