基于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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
jquery键盘事件介绍
Jan 31 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
javascript实现完美拖拽效果
May 06 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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自动跳转中英文页面
2008/07/29 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php+javascript的日历控件
2009/11/19 PHP
基于PHP中的常用函数回顾
2013/07/11 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
Zend Framework教程之Loader以及PluginLoader用法详解
2016/03/09 PHP
Laravel中服务提供者和门面模式的入门介绍
2017/11/06 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
2016/06/17 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
2017/06/13 Javascript
Bootstrap图片轮播效果详解
2017/10/17 Javascript
vue.js $refs和$emit 父子组件交互的方法
2017/12/20 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
[54:15]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第二场2月1日
2021/03/11 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
python 常见的排序算法实现汇总
2020/08/21 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
新加坡领先的时尚生活方式零售品牌:CHARLES & KEITH
2018/01/16 全球购物
韩国11街:11STREET
2018/03/27 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
公司员工检讨书
2014/02/08 职场文书
食品科学与工程专业毕业生求职信范文
2014/07/21 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL