基于jQuery倾斜打开侧边栏菜单特效代码


Posted in Javascript onSeptember 15, 2015

基于jQuery多重图片无限循环动画效果。这是一款非常实用的jQuery多图片无限循环动画特效插件。

效果图如下:

 基于jQuery倾斜打开侧边栏菜单特效代码

在线预览    源码下载

html代码:

<div id="paper-back">
  <nav>
   <div class="close"></div>
   <a href="#">Home</a>
   <a href="#">About Us</a>
   <a href="#">Our Work</a>
   <a href="#">Contact</a>
  </nav>
 </div>
 <div id="paper-window">
  <div id="paper-front">
   <div class="hamburger"><span></span></div>
   <div id="container">
    <section>
     <p>点击左上角的按钮打开菜单</p>
     <p>适用浏览器:、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>不支持IE及以下浏览器。</p>
     <p>
     <script src="/scripts/bc/_gg__.js" type="text/javascript"></script></p>
    </section>
    <section></section>
   </div>
  </div>
 </div>

js代码:

var paperMenu = {
   $window: $('#paper-window'),
   $paperFront: $('#paper-front'),
   $hamburger: $('.hamburger'),
   offset: ,
   pageHeight: $('#paper-front').outerHeight(),
   open: function () {
    this.$window.addClass('tilt');
    this.$hamburger.off('click');
    $('#container, .hamburger').on('click', this.close.bind(this));
    this.hamburgerFix(true);
    // console.log('opening...');
   },
   close: function () {
    this.$window.removeClass('tilt');
    $('#container, .hamburger').off('click');
    this.$hamburger.on('click', this.open.bind(this));
    this.hamburgerFix(false);
    // console.log('closing...');
   },
   updateTransformOrigin: function () {
    scrollTop = this.$window.scrollTop();
    equation = (scrollTop + this.offset) / this.pageHeight * ;
    this.$paperFront.css('transform-origin', 'center ' + equation + '%');
   },
   hamburgerFix: function (opening) {
    if (opening) {
     $('.hamburger').css({
      position: 'absolute',
      top: this.$window.scrollTop() + + 'px'
     });
    } else {
     setTimeout(function () {
      $('.hamburger').css({
       position: 'fixed',
       top: 'px'
      });
     }, );
    }
   },
   bindEvents: function () {
    this.$hamburger.on('click', this.open.bind(this));
    $('.close').on('click', this.close.bind(this));
    this.$window.on('scroll', this.updateTransformOrigin.bind(this));
   },
   init: function () {
    this.bindEvents();
    this.updateTransformOrigin();
   }
  };
  paperMenu.init();
Javascript 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
jQuery检查事件是否触发的方法
Jun 26 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
Angularjs CURD 详解及实例代码
Sep 14 Javascript
jQuery实现CheckBox全选、全不选功能
Jan 11 Javascript
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 Javascript
JS回调函数深入理解
Oct 16 Javascript
vue中js判断长时间不操作界面自动退出登录(推荐)
Jan 22 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 #Javascript
You might like
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
js自带函数备忘 数组
2006/12/29 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)
2010/03/24 Javascript
jQuery基本选择器选择元素使用介绍
2013/04/18 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
js常用自定义公共函数汇总
2014/01/15 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
javascript在IE下trim函数无法使用的解决方法
2014/09/12 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
微信小程序 action-sheet底部菜单详解
2016/10/27 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
无限循环轮播图之运动框架(原生JS实现)
2017/10/01 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
js实现鼠标点击飘爱心效果
2020/08/19 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python读写json文件的简单实现
2017/04/11 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
Python如何对XML 解析
2020/06/28 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
台湾家适得:Homeget
2019/02/11 全球购物
媒矿安全生产承诺书
2014/05/23 职场文书
四风问题专项整治工作情况报告
2014/10/28 职场文书
2014年市场部工作总结
2014/11/25 职场文书
办公室个人总结
2015/02/28 职场文书
工资证明范本
2015/06/12 职场文书
党员转正大会主持词
2015/07/02 职场文书
2016继续教育研修日志
2015/11/13 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
Nginx配置SSL证书出错解决方案
2021/03/31 Servers