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 相关文章推荐
jquery.boxy插件的iframe扩展代码
Jul 02 Javascript
引用 js在IE与FF之间的区别详细解析
Nov 20 Javascript
javascript函数重载解决方案分享
Feb 19 Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
vue-cli中安装方法(图文详细步骤)
Dec 12 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
Vue分页器实现原理详解
Jun 28 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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
php中利用explode函数分割字符串到数组
2014/02/08 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
详解Yii2 rules 的验证规则
2016/12/02 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
jQuery MD5加密实现代码
2010/03/15 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
babel的使用及安装配置教程
2018/02/22 Javascript
让axios发送表单请求形式的键值对post数据的实例
2018/08/11 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
微信小程序实现侧边栏分类
2019/10/21 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
python使用arp欺骗伪造网关的方法
2015/04/24 Python
Python读写文件方法总结
2015/06/09 Python
详解Python的Lambda函数与排序
2016/10/25 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python下载文件记录黑名单的实现代码
2017/10/24 Python
Python3 中文文件读写方法
2018/01/23 Python
Python面向对象程序设计OOP入门教程【类,实例,继承,重载等】
2019/01/05 Python
python实现统计文本中单词出现的频率详解
2019/05/20 Python
Python扫描端口的实现
2021/01/25 Python
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
法务专员岗位职责
2014/01/02 职场文书
2014党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
水电施工员岗位职责
2015/04/11 职场文书
运动会800米赞词
2015/07/22 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python