首先非常感谢网友啁甍晟的无私分享，此作品是一款jquery实现html视差特效，也是网友啁甍晟的分享到Jqueryschool网站上的第一款作品，写好后就第一时间与大家分享，现在网站的视差特效都是差不多的，大家好好利用哦。。。
jquery核心代码如下：
$(document).ready(function() {
var obg = $('.bg').height();
var vLen = 0;
var oscrolltop;
$('#one').addClass('content');
$(window).scroll(function(){
oscrolltop = $(window).scrollTop();
var num = Math.floor(oscrolltop/obg);
var movescroll =(oscrolltop/2)+50;
var coords ='center'+' '+movescroll+'px';
$(".nav3").css("backgroundPosition",coords);
$(".btn li:eq("+num+")").addClass('selected').siblings('li').removeClass('selected');
$('.bg').eq(num).addClass('content').siblings('.bg').removeClass('content');
});
$('.btn li').click(function(){
if($(this).index()==0){
$('body,html').animate({scrollTop:$('#one').offset().top},2000);
}
else if($(this).index()==1){
$('body,html').animate({scrollTop:$('#two').offset().top},2000);
}
else{
$('body,html').animate({scrollTop:$('#three').offset().top},2000);
}
});
});
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友啁甍晟 html视差特效 jquery视差特效