jQuery右下角旋转环状菜单特效代码


Posted in Javascript onAugust 10, 2015

jquery实现右下角旋转环形菜单特效代码,是固定在页面右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css制作动画效果。
效果图如下:

jQuery右下角旋转环状菜单特效代码

在线预览    点击下载

html代码:

<div class="htmleaf-container">
 <div id='ss_menu'>
  <div>
  <i class="fa fa-qq"></i>
  </div>
  <div>
  <i class="fa fa-weibo"></i>
  </div>
  <div>
  <i class="fa fa-weixin"></i>
  </div>
  <div>
  <i class="fa fa-renren"></i>
  </div>
  <div class='menu'>
  <div class='share' id='ss_toggle' data-rot=''>
   <div class='circle'></div>
   <div class='bar'></div>
  </div>
  </div>
 </div>
</div>

js代码:

$(document).ready(function (ev) {
 var toggle = $('#ss_toggle');
 var menu = $('#ss_menu');
 var rot;
 $('#ss_toggle').on('click', function (ev) {
  rot = parseInt($(this).data('rot')) - 180;
  menu.css('transform', 'rotate(' + rot + 'deg)');
  menu.css('webkitTransform', 'rotate(' + rot + 'deg)');
  if (rot / 180 % 2 == 0) {
   toggle.parent().addClass('ss_active');
   toggle.addClass('close');
  } else {
   toggle.parent().removeClass('ss_active');
   toggle.removeClass('close');
  }
  $(this).data('rot', rot);
 });
 menu.on('transitionend webkitTransitionEnd oTransitionEnd', function () {
  if (rot / 180 % 2 == 0) {
   $('#ss_menu div i').addClass('ss_animate');
  } else {
   $('#ss_menu div i').removeClass('ss_animate');
  }
 });
});
Javascript 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
使用js dom和jquery分别实现简单增删改
Sep 11 Javascript
浅谈JavaScript Math和Number对象
Jan 26 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
vue实现点击展开点击收起效果
Apr 27 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 #Javascript
javascript与Python快速排序实例对比
Aug 10 #Javascript
javascript密码强度校验代码(两种方法)
Aug 10 #Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 #Javascript
jQuery解决input超多的表单提交
Aug 10 #Javascript
You might like
计算一段日期内的周末天数的php代码(星期六,星期日总和)
2009/11/12 PHP
smarty简单入门实例
2014/11/28 PHP
windows7下php开发环境搭建图文教程
2015/01/06 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
基于ThinkPHP删除目录及目录文件函数
2020/10/28 PHP
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jquery获取点击控件的绝对位置简单实例
2016/10/13 Javascript
正则表达式,替换所有HTML标签的简单实例
2016/11/28 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Angular中ng-bind和ng-model的区别实例详解
2017/04/10 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
JS document form表单元素操作完整示例
2020/01/13 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
Vue中computed和watch有哪些区别
2020/12/19 Vue.js
梳理一下vue中的生命周期
2020/12/30 Vue.js
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
Python3实现汉语转换为汉语拼音
2019/07/08 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
国外最大的眼镜网站:Coastal
2017/08/09 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
WSDL的操作类型主要有几种
2013/07/19 面试题
儿童生日会策划方案
2014/05/15 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
创业计划书之熟食店
2019/10/16 职场文书