首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

基于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代码实现圆形菜单展开收缩效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

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

- Author -

思胖胖

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
UpdatePanel和Jquery冲突的解决方法
Apr 01 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
Smartour 让网页导览变得更简单(推荐)
Jul 19 Javascript
解决layui checkbox 提交多个值的问题
Sep 02 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
jQuery实现计算器功能
Oct 19 jQuery
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
哈萨克斯坦购物网站(2) 白俄罗斯购物网站(3) 约旦购物网站(1) 冰岛购物网站(1) 罗马尼亚购物网站(10) 马耳他购物网站(1) 保加利亚购物网站(3) PHP面试题(54) 希腊购物网站(6) JAVA面试题(401)
You might like
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
基于PHP字符串的比较函数strcmp()与strcasecmp()的使用详解
2013/05/15 PHP
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
奇妙的js
2007/09/24 Javascript
javascript document.compatMode兼容性
2010/02/23 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
2012/09/30 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
2013/01/11 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
轻松创建nodejs服务器（9）：实现非阻塞操作
2014/12/18 NodeJs
使用js画图之正弦曲线
2015/01/12 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
基于jquery实现瀑布流布局
2020/06/28 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
JS实现移动端可折叠导航菜单（现代都市风）
2020/07/07 Javascript
[06:33]DOTA2亚洲邀请赛小组赛第二日 TOP10精彩集锦
2015/01/31 DOTA
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python做智能家居温湿度报警系统
2018/09/25 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
pygame实现成语填空游戏
2019/10/29 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
可持续木材、生态和铝制太阳镜：Proof Eyewear
2019/07/24 全球购物
幼儿园教师工作制度
2014/01/22 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
乡镇法制宣传日活动总结
2015/05/05 职场文书
集结号观后感
2015/06/08 职场文书
创业计划书之家教托管
2019/09/25 职场文书
PostgreSQL 插入INSERT、删除DELETE、更新UPDATE、事务transaction
2022/04/12 PostgreSQL