首页
所有分类
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 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
在jQuery中 常用的选择器介绍
Apr 16 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
Mvc提交表单的四种方法全程详解
Aug 10 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
基于js 各种排序方法和sort方法的区别(详解)
Jan 03 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
Feb 28 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
JavaScript代码实现简单计算器
Dec 27 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
NTP(1) calc(1) RestTemplate(1) K8s(1) Hive(5) HttpClient(1) SandBox(1) Windows Server 2022(3) Windows Server(4) OpenFeign(1)
You might like
PHP Memcached应用实现代码
2010/02/08 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP递归删除目录几个代码实例
2014/04/21 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
鼠标右击事件代码(asp.net后台)
2011/01/27 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
编写Python脚本来获取mp3文件tag信息的教程
2015/05/04 Python
Python中zfill()方法的使用教程
2015/05/20 Python
Python中super()函数简介及用法分享
2016/07/11 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python实现按长宽比缩放图片
2018/06/07 Python
对python中for、if、while的区别与比较方法
2018/06/25 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Pandas统计重复的列里面的值方法
2019/01/30 Python
详解python中的hashlib模块的使用
2019/04/22 Python
Python使用LDAP做用户认证的方法
2019/06/20 Python
python中将两组数据放在一起按照某一固定顺序shuffle的实例
2019/07/15 Python
Python实现EM算法实例代码
2020/10/04 Python
草莓网官网：StrawberryNET
2019/08/21 全球购物
国际商务专业职业生涯规划书范文
2014/01/17 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
车间统计员岗位职责
2015/04/14 职场文书
党员干部学习三严三实心得体会
2016/01/05 职场文书
初中思品教学反思
2016/02/20 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers