基于jQuery傾斜打開(kāi)側(cè)邊欄菜單特效代碼
基于jQuery多重圖片無(wú)限循環(huán)動(dòng)畫(huà)效果。這是一款非常實(shí)用的jQuery多圖片無(wú)限循環(huán)動(dòng)畫(huà)特效插件。
效果圖如下:

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)擊左上角的按鈕打開(kāi)菜單</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è)邊欄模塊跟隨滾動(dòng)條滑動(dòng)固定效果的實(shí)現(xiàn)方法(js+jquery等)
- jQuery固定浮動(dòng)側(cè)邊欄實(shí)現(xiàn)思路及代碼
- Jquery實(shí)現(xiàn)側(cè)邊欄跟隨滾動(dòng)條固定(兼容IE6)
- jQuery側(cè)邊欄隨窗口滾動(dòng)實(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種簡(jiǎn)單方式
- JQuery顯示、隱藏div的幾種方法簡(jiǎn)明總結(jié)
- jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
相關(guān)文章
jquery的父子兄弟節(jié)點(diǎn)查找示例代碼
這篇文章主要介紹了jquery的父子兄弟節(jié)點(diǎn)的查找方法,需要的朋友可以參考下2014-03-03
jQuery常見(jiàn)動(dòng)畫(huà)效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫(huà)基本實(shí)現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10
JQuery中關(guān)于jquery.js與jquery.min.js的比較探討
jquery-1.4.2.min.js是優(yōu)化的,而query-1.4.2.js是易于開(kāi)發(fā)著閱讀的,具體詳解祥看本文,希望對(duì)你有所幫助2013-05-05
用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色
這篇文章主要介紹了用jQuery toggleClass 實(shí)現(xiàn)鼠標(biāo)移上變色,需要的朋友可以參考下2014-05-05
jquery.post用法關(guān)于type設(shè)置問(wèn)題補(bǔ)充
當(dāng)使用ajax獲取data數(shù)據(jù)的時(shí)候,直接data.foo就可以得到。而較低版本的jquery就不行比如1.4之前,下面為大家介紹下jquery.post用法關(guān)于type設(shè)置問(wèn)題2014-01-01
jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)分隔條左右拖動(dòng)功能,需要的朋友可以參考下2015-11-11
jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)
這篇文章主要介紹了jQuery leonaScroll 1.1 自定義滾動(dòng)條插件(推薦)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09
JQuery中綁定事件(bind())和移除事件(unbind())
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享,這里推薦給有需要的小伙伴們參考下。2015-02-02

