基于jQuery多重图片无限循环动画效果。这是一款非常实用的jQuery多图片无限循环动画特效插件。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<divid="paper-back"><nav><divclass="close"></div><ahref="#">Home</a><ahref="#">About Us</a><ahref="#">Our Work</a><ahref="#">Contact</a></nav></div><divid="paper-window"><divid="paper-front"><divclass="hamburger"><span></span></div><divid="container"><section><p>点击左上角的按钮打开菜单</p><p>适用浏览器：360、Firefox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.<
br>不支持IE8及以下浏览器。</p><p><scriptsrc="/scripts/2bc/_gg_980_90.js"type="text/javascript"></script></p></section><section></section></div></div></div>
js代码：
varpaperMenu ={
$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();
via：http://www.w2bc.com/article/jquery-left-lean-nav