基于jQuery傾斜打開側邊欄菜單特效代碼
更新時間:2015年09月15日 13:01:08 作者:愛上程序猿
基于jQuery多重圖片無限循環(huán)動畫效果,本文給大家分享基于jQuery傾斜打開側邊欄菜單特效代碼,感興趣的朋友可以參考下
基于jQuery多重圖片無限循環(huán)動畫效果。這是一款非常實用的jQuery多圖片無限循環(huán)動畫特效插件。
效果圖如下:
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();
相關文章
JQuery中關于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的,而query-1.4.2.js是易于開發(fā)著閱讀的,具體詳解祥看本文,希望對你有所幫助2013-05-05用jQuery toggleClass 實現(xiàn)鼠標移上變色
這篇文章主要介紹了用jQuery toggleClass 實現(xiàn)鼠標移上變色,需要的朋友可以參考下2014-05-05jQuery leonaScroll 1.1 自定義滾動條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動條插件(推薦)的相關資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-09JQuery中綁定事件(bind())和移除事件(unbind())
本文主要向大家詳細介紹了jQuery的綁定事件和移除事件的使用方法和示例分享,這里推薦給有需要的小伙伴們參考下。2015-02-02