基于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程序来实现动画功能
Mar 06 Javascript
js 巧妙去除数组中的重复项
Jan 25 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
JavaScrpt判断一个数是否是质数的实例代码
Jun 11 Javascript
element ui 对话框el-dialog关闭事件详解
Feb 26 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
浅谈高大上的微信小程序中渲染html内容—技术分享
Oct 25 Javascript
学习使用ExpressJS 4.0中的新Router的用法
Nov 06 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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
php操作excel文件 基于phpexcel
2010/07/02 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
PHP实现批量上传单个文件
2015/12/29 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
php和nginx交互实例讲解
2019/09/24 PHP
javascript 获取select下拉列表值的代码
2009/09/07 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
2012/10/11 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
JavaScript移除数组元素减少长度的方法
2013/09/05 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
Node连接mysql数据库方法介绍
2017/02/07 Javascript
JavaScript引用类型之基本包装类型实例分析【Boolean、Number和String】
2018/08/09 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
js前端对于大量数据的展示方式及处理方法
2020/12/02 Javascript
javascript实现简单留言板案例
2021/02/09 Javascript
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
介绍Python中内置的itertools模块
2015/04/29 Python
使用Python脚本生成随机IP的简单方法
2015/07/30 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Django Channel实时推送与聊天的示例代码
2020/04/30 Python
浅析NumPy 切片和索引
2020/09/02 Python
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
Linux如何为某个操作添加别名
2015/02/05 面试题
2014年小学班主任工作总结
2014/11/08 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
2015大学生求职信范文
2015/03/20 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
为Java项目添加Redis缓存的方法
2021/05/18 Redis
Python简易开发之制作计算器
2022/04/28 Python