基于jQuery傾斜打開側邊欄菜單代碼

2024-04-27 15:01:20

字體：大中小

來源：轉載

供稿：網友

基于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>適用瀏覽器：360、Firefox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. <br>不支持IE8及以下瀏覽器。</p>                   <p>                   <script src="/scripts/2bc/_gg_980_90.js" type="text/javascript"></script></p>               </section>               <section></section>           </div>       </div>   </div>

js代碼：

var paperMenu = {          $window: $('#paper-window'),          $paperFront: $('#paper-front'),          $hamburger: $('.hamburger'),          offset: 1800,          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 * 100;              this.$paperFront.CSS('transform-origin', 'center ' + equation + '%');          },          hamburgerFix: function (opening) {              if (opening) {                  $('.hamburger').css({                      position: 'absolute',                      top: this.$window.scrollTop() + 30 + 'px'                  });              } else {                  setTimeout(function () {                      $('.hamburger').css({                          position: 'fixed',                          top: '30px'                      });                  }, 300);              }          },          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();