基于jQuery傾斜打開側(cè)邊欄菜單特效代碼
更新時間:2015年09月15日 13:01:08 作者:愛上程序猿
基于jQuery多重圖片無限循環(huán)動畫效果,本文給大家分享基于jQuery傾斜打開側(cè)邊欄菜單特效代碼,感興趣的朋友可以參考下
基于jQuery多重圖片無限循環(huán)動畫效果。這是一款非常實(shí)用的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>點(diǎn)擊左上角的按鈕打開菜單</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();
您可能感興趣的文章:
- 博客側(cè)邊欄模塊跟隨滾動條滑動固定效果的實(shí)現(xiàn)方法(js+jquery等)
- jQuery固定浮動側(cè)邊欄實(shí)現(xiàn)思路及代碼
- Jquery實(shí)現(xiàn)側(cè)邊欄跟隨滾動條固定(兼容IE6)
- jQuery側(cè)邊欄隨窗口滾動實(shí)現(xiàn)方法
- jquery仿京東側(cè)邊欄導(dǎo)航效果
- jquery實(shí)現(xiàn)側(cè)邊欄左右伸縮效果的示例
- jQuery實(shí)現(xiàn)智能判斷固定導(dǎo)航條或側(cè)邊欄的方法
- jQuery側(cè)邊欄實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)顯示和隱藏的4種簡單方式
- JQuery顯示、隱藏div的幾種方法簡明總結(jié)
- jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
相關(guān)文章
模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼
這篇文章介紹了模擬jQuery中的ready方法及實(shí)現(xiàn)按需加載css,js實(shí)例代碼,有需要的朋友可以參考一下2013-09-09
jQueryUI如何自定義組件實(shí)現(xiàn)代碼
第一次自定義jQueryUI Widget 又是第一次,現(xiàn)在的感受是jQueryUI Widget能讓你代碼組織得更好,風(fēng)格更一致。2010-11-11
jQuery中toggleClass()方法用法實(shí)例
這篇文章主要介紹了jQuery中toggleClass()方法用法,實(shí)例分析了toggleClass()方法的功能、定義及對添加或移除匹配元素的一個或多個類進(jìn)行切換的使用技巧,需要的朋友可以參考下2015-01-01
jQuery使用hide方法隱藏指定元素class樣式用法實(shí)例
這篇文章主要介紹了jQuery使用hide方法隱藏指定元素class樣式,實(shí)例分析了jQuery中hide隱藏class樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)滑動頁面固定頂部顯示(可根據(jù)顯示位置消失與替換)
這篇文章主要介紹了jQuery實(shí)現(xiàn)滑動頁面固定頂部顯示,還可根據(jù)顯示位置消失與替換對應(yīng)的當(dāng)前顯示項,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
jQuery EasyUI API 中文文檔 - Pagination分頁
jQuery EasyUI API 中文文檔 - Pagination分頁,使用jQuery EasyUI的朋友可以參考下。2011-09-09
jQuery簡單幾行代碼實(shí)現(xiàn)tab切換
本文給大家介紹的是一款使用jQuery實(shí)現(xiàn)的簡易選項卡的代碼,通過控制css熟悉來實(shí)現(xiàn)tab切換,思路清晰,這里推薦給大家。2015-03-03

