基于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中的ready方法及實現(xiàn)按需加載css,js實例代碼
這篇文章介紹了模擬jQuery中的ready方法及實現(xiàn)按需加載css,js實例代碼,有需要的朋友可以參考一下2013-09-09
jQuery使用hide方法隱藏指定元素class樣式用法實例
這篇文章主要介紹了jQuery使用hide方法隱藏指定元素class樣式,實例分析了jQuery中hide隱藏class樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery實現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實現(xiàn)滑動頁面固定頂部顯示,還可根據(jù)顯示位置消失與替換對應的當前顯示項,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jQuery EasyUI API 中文文檔 - Pagination分頁
jQuery EasyUI API 中文文檔 - Pagination分頁,使用jQuery EasyUI的朋友可以參考下。2011-09-09

