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 相关文章推荐
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
from表单多个按钮提交用onclick跳转不同action
Apr 24 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
Mint UI 基于 Vue.js 移动端组件库
Nov 07 Javascript
vue实现商城购物车功能
Nov 27 Javascript
vue车牌号校验和银行校验实战
Jan 23 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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连接与操作PostgreSQL数据库的方法
2014/12/25 PHP
CI框架源码解读之利用Hook.php文件完成功能扩展的方法
2016/05/18 PHP
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
js中widow.open()方法使用详解
2013/07/30 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
2016/07/27 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue .sync修饰符的使用详解
2018/06/15 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
Python中title()方法的使用简介
2015/05/20 Python
Python3实现发送QQ邮件功能(文本)
2017/12/15 Python
python实现逆序输出一个数字的示例讲解
2018/06/25 Python
pygame游戏之旅 添加游戏界面按键图形
2018/11/20 Python
python微信撤回监测代码
2019/04/29 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
Ref与out有什么不同
2012/11/24 面试题
四年大学生活的个人自我评价
2013/12/11 职场文书
行政部总经理岗位职责
2014/01/04 职场文书
报纸媒体创意广告词
2014/03/17 职场文书
优秀家长事迹材料
2014/05/17 职场文书
课外访万家心得体会
2014/09/03 职场文书
八项规定整改方案
2014/10/01 职场文书
质量保证书
2015/01/17 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
2015年学校图书室工作总结
2015/05/19 职场文书
民事起诉书范本
2015/05/19 职场文书
公司转让协议书
2016/03/19 职场文书
laravel添加角色和模糊搜索功能的实现代码
2021/06/22 PHP
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android